эффективно создавая переменные, когда флажок установлен, и используя эти переменные позже в коде

Question

ниже - это информация, в которой мне нужна помощь.

$(document).ready(function(){ 
     $('.checkboxes :checkbox').click(function(){ 
      if($(this).is(':checked')){ 
       console.log(this.id + this.checked) 

я хочу, чтобы установить переменный с samename Ид проверяемого поля так, если showItems проверялась я бы переменные Var showItems = истина; Я хочу это, так что я мог видеть, если showItems проверяется который будет Alow мне выполнять соответствующие функции я думаю, что я мог бы сделать что-то вроде этого

   if($this.id = "withones"){ 
        var withones = true;//on 
       } 
       if($this.id = "withoutOnes"){ 
        var withoutOnes = true;//on 
       } 
       etc. 

я чувствую, что выше, является новичком способ кода. скажем, у меня есть много флажков, и это также похоже на повторение себя. Я попытался поместить идентификаторы в массив и пропустить их, но я получил элемент html в консоли, когда я нажал на поле. Я хотел бы, чтобы кто-то сказал мне, есть ли более эффективный способ настроить эти переменные. и если так, покажите мне, пожалуйста.

Также я новичок в программировании, поэтому благодарим за помощь. но я тоже думал о другой проблеме. если я настроил эти переменные здесь, и я хочу настроить другую функцию в другом месте для выполнения математических операций. я хочу, чтобы функция, чтобы иметь возможность оценить стоимость withones и withoutOnes переменных, так что я хотел бы сделать что-то подобное в функции

function add(){ 
        if(withones){ //true|| false 
         return 2 + 2; 
        } 
        if (withoutOnes) { 
         return 'blah' 
        }; 
       } 

У меня были проблемы в прошлом, пытаясь проверить значения, за пределами функции. Думаю, я попытался установить его в аргументах. но он просто не читал. Если бы вы могли также показать мне пример использования переменных, где еще в коде, как описано выше, будет полезно. Я забыл упомянуть, что значение переменной изменится, когда пользователь нажмет на это поле. либо true, либо false. Я думаю, что моя проблема в прошлом, что, когда флажок, а затем снимите флажок у меня была проблема замены переменной, особенно когда он используется в виде отдельной функции

  } 
     }); 
    }); 

Answer 1

Вы можете иметь объект со своими переменными и добавить вАР к этому объекту: динамично

var oVars = {} 

// добавление вар oVars [nameVar] = valueVar

// доступ к вар oVars [nameVar]

Answer 2

Вы можете захватить идентификатор с attr() или вы можете просто изменить значение флажка с val() метода в JQuery, как это: FIDDLE

$(document).ready(function() { 

    $('.checkboxes').change(function (event) { 
     if ($(this).is(':checked')) { 
      var captureId = $(this).attr('id'); 
      $(this).val(true); 
      alert($(this).val()); 
     } 
     else {$(this).val(false); 
       alert($(this).val());} 
    }); 
}); 

Заметим, что вы можете оценить позже все флажки с помощью одной кнопки и соберите из них значение false или true. Зачем вам проходить все осложнения с изменением значений переменных.

Answer 3

Два других ответа верны, хотя кажется, что вы хотите знать, как управлять большим списком флажков с различными методами в зависимости от типа. Это может выглядеть следующим образом:

function multiply(this_object){ 
     if((this_object.is(':checked')) && (this_object.attr("with") == 1)) 
      return "with withone and checked"; 
     else 
      return "is not both"; 
} 


$(document).ready(function(){ 
    $('.checkboxes').click(function(){ 
     var this_object = $(this); 
     alert(multiply(this_object)); 

    }); 
}); 

Там не должно быть никакой необходимости хранить все значения в переменной, если вы передаете все из них на другую страницу - например, с помощью AJAX.. Просто укажите их прямо из поля источника.Если вам нужна другая информация, хранящаяся рядом, создайте новый атрибут в поле - например, «с», который я сделал для этого примера. См. Этот Скрипт: http://jsfiddle.net/6ug6gL97/

Answer 4

ваш вопрос довольно широк; поэтому я постараюсь сделать все возможное, чтобы дать вам какой-то ответ. Прежде всего, я бы использовал переменные global scope при объявлении переменных: withones и withoutOnes. Во-вторых, вы хотели избежать повторения кода. Ну, для этой цели я бы использовал JavaScript-массивы. В файле array вы можете добавить свои переменные как objects. В объекте вы можете иметь свои идентификаторы и другие данные «аккуратно» в массиве, что, в свою очередь, помогает вашему коду стать эффективным. Ниже массив с объектами:

objectArray = [{ 
    id: "withones", 
    checked: false, 
    method: function() { 
     return 2 + 2; 
    } 
}, { 
    id: "withoutOnes", 
    checked: false, 
    method: function() { 
     return 'blah'; 
    } 
}]; 

выше массив может быть использован в вашем $('.checkboxes :checkbox').click(function() обработчика и добавить функцию(), чтобы избежать повторения. Обновленный код ниже, где метод jQuery each() используется для циклизации элементов массива.

Последний вопрос, который был связан с add() функцией. Ну, это был сложный вопрос, и я попытался использовать функцию обратного вызова, надеюсь, правильно, чтобы выполнить ваши функции из массива. В методе добавления я попытался ответить на этот вопрос: https://stackoverflow.com/a/13343452/2048391

О последнем бите Я не уверен на 100%, что я правильно использовал функцию обратного вызова; поэтому я надеюсь, что кто-то, более знакомый с этими сложными функциями JavaScript, может поправить меня, если что-то нужно изменить.

objectArray = [{ 
 
    id: "withones", 
 
    checked: false, 
 
    method: function() { 
 
     return 2 + 2; 
 
    } 
 
}, { 
 
    id: "withoutOnes", 
 
    checked: false, 
 
    method: function() { 
 
     return 'blah'; 
 
    } 
 
}]; 
 

 

 
$(document).ready(function() { 
 
    $('.checkboxes :checkbox').click(function() { 
 
     
 
     var id = this.id; 
 
     var checkedValue = this.checked; 
 

 
     $.each(objectArray, function (index, object) { 
 
      if (object.id === id) { 
 
       object.checked = checkedValue; 
 
      } 
 
     }); 
 

 
     add(); 
 
    }); 
 

 
    function add() { 
 
     // clear results  
 
     $("#addResults").text(""); 
 
     
 
     $.each(objectArray, function (index, object) { 
 

 
      if (object.checked === true) { 
 
       
 
       var returnValue = createCallback(object.method) 
 
       
 
       $("#addResults").append(returnValue + "<br>"); 
 

 
       console.log(returnValue); 
 
      } 
 
     }); 
 
    } 
 

 
    function createCallback(method) { 
 
      return method(); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="checkboxes"> 
 
    <input type="checkbox" id="withones"></input> 
 
    <label>With Ones</label> 
 
    <br> 
 
    <input type="checkbox" id="withoutOnes"></input> 
 
    <label>Without Ones</label> 
 
</div> 
 

 
<div id="addResults"> 
 

 
</div>