How not to repeat variables with the same name for different functions

Question

How not to repeat variables with the same name for different functions

Navigation

#1 by (5 votes)
#2 by (2 votes)
#3 by (1 votes)

7

I have this javascript code:

$().ready(function() {        
      $("#aceptarEditar").click(function(){
        var item = $('#idTemp').val();  
           $("#botones"+item).toggle(); 
           $("#botonesEditar"+item).toggle(); 
           $("#txtNombre"+item).prop("disabled", false);
           $("#txtDescripcion"+item).prop("disabled", false);
           });

      $("#aceptarSalir").click(function(e){
        var item = $("#idTemp").val();  
        $("#botones"+item).toggle(); 
        $("#botonesEditar"+item).toggle(); 
        $("#txtNombre"+item).prop("disabled", true);
        $("#txtDescripcion"+item).prop("disabled", true);
           });

As you may notice, I repeat the variable twice:

 var item = $("#idTemp").val();

Which, as you may notice, repeats both the name and value of this. That is why I only come to ask you if you could teach me the correct way to name this variable once because I use it twice, in one where a button is used to edit and another button to cancel when editing .

javascript jquery

asked by Reinos Ric 02.04.2018 в 20:24

source

3 answers

Validate at least one checkbox does not work C ++: std: endl VS \ n

score 5 · Answer 1

The problem of creating and instantiating that variable only once is that if you change its value in one of the two methods it will not work as you expect, what you can do is create a global variable and assign it the element in html and within the methods Access the property you use. Another thing you can do is to see that it is repeated in both methods, create one and call it with x parameters to make the function of the first or the second. I realized that the only thing that varies in both is that you set the disabled property to false or true in the last lines of your events, so this is the result of my refactoring:

$().ready(function() {
    var item = $('#idTemp'); 
    var comun = function(disabled){
        var disabled = !disabled || disabled === undefined ? false : disabled;
        var val = item.val();
        $("#botones"+val).toggle(); 
        $("#botonesEditar"+val).toggle(); 
        $("#txtNombre"+val).prop("disabled", disabled);
        $("#txtDescripcion"+val).prop("disabled", disabled);
    };

  $("#aceptarEditar").click(function(){   
        comun(false);
  });

  $("#aceptarSalir").click(function(e){
        comun(true);
   });

score 2 · Answer 2

If that value never changes, you could put the variable outside the functions:

$().ready(function() {  

  var item = $('#idTemp').val();

  $("#aceptarEditar").click(function(){
      // ... usar item ...
  });

  $("#aceptarSalir").click(function(e){
      // ... usar item ...
  });

But if that value can be variable and have different values each time you click on the buttons, then you have to leave it as you did. At the most, you could declare the variable outside the functions and assign them the value within them, but I do not recommend it:

  var item;

  $("#aceptarEditar").click(function(){
      item = $('#idTemp').val();
  });

  $("#aceptarSalir").click(function(e){
      item = $('#idTemp').val();
  });

score 1 · Answer 3

A clean way to do it is with callback passing the parameter by means of bind

function accionItem(isDisabled){
  let item = $('#idTemp').val();  
  console.log(item)
   $("#botones"+item).toggle(); 
   $("#botonesEditar"+item).toggle(); 
   $("#txtNombre"+item).prop("disabled", isDisabled);
   $("#txtDescripcion"+item).prop("disabled", isDisabled);
  
}

$().ready(function() {        
      $("#aceptarEditar").click(accionItem.bind(false));
      
      $("#aceptarSalir").click(accionItem.bind(true));
               
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="aceptarEditar" id="aceptarEditar"> Aceptar y editara</button>

<button class="aceptarSalir" id="aceptarSalir"> Aceptar y editara</button>

<input  id="idTemp" type="hidden" value="chispas">

What difference does it make in this way to the one proposed by others? simple you do not call a function twice, in the example that other colleagues show you, click on it, they have a function that calls the function that changes the values, in conclusion you call three functions, and if you want to optimize your code then you must keep this in mind