JQuery 测验应用程序 - 使用;用于打开/关闭变量的标签

Question

我正在编写一个 jqueryphonegap 测验应用程序，并且有许多类别，用户可以通过复选框进行选择。然后返回属于这些类别的相关问题。但是，如果选择了该类别的复选框，我有两个巨大的 switch 语句将相关变量从 0 更改为 1，反之亦然（此信息用于构建复合数据库查询）。

复选框后面的变量值只能是 0 或 1，那么有没有更好的方法来做到这一点？

我的 HTML 是：

<h2>Categories</h2>
      <ul class="rounded">
          <li>Cardiology<span class="toggle"><input type="checkbox" id="cardiology" /></span></li>
          <li>Respiratory<span class="toggle"><input type="checkbox" id="respiratory" /></span></li>
          <li>Gastrointestinal<span class="toggle"><input type="checkbox" id="gastrointestinal" /></span></li>
          <li>Neurology<span class="toggle"><input type="checkbox" id="neurology" /></span></li>
      </ul>

我的 Javascript 是这样的：

var toggle_cardiology = 0;
var toggle_respiratory = 0;
var toggle_gastrointestinal = 0;
var toggle_neurology = 0;

$(function() {
$('input[type="checkbox"]').bind('click',function() {
    if($(this).is(':checked')) 
    {
        switch (this.id)
        {
           case "cardiology":
            toggle_cardiology = 1;
            break;
           case "respiratory":
            toggle_respiratory = 1;
            break;
           case "gastrointestinal":
            toggle_gastrointestinal = 1;
            break;
           case "neurology":
            toggle_neurology = 1;
            break;

等等（这对于 10 多个类别加上一个带有开关的 else 语句来将它们改回来很麻烦）

我正在考虑将 HTML id 标签连接到“toggle_”前缀 - 用伪代码表示：

if (toggle_ + this.id == 1){
    toggle_ + this.id == 0}

if (toggle_ + this.id == 0){
    toggle_ + this.id == 1}

谢谢，尼克。

Answer 1

var toggle = {"cardiology":0,"respiratory":0,"gastrointestinal":0,"neurology":0};

$(function() {
    $('input:checkbox').bind('click', function() {
        toggle[this.id] = $(this).is(':checked') ? 1 : 0;

        //Debug:To check the current values : begin
        var s = "";
        $.each(toggle, function(i, val){
            s += i + ":" + toggle[i] + " ";
        })

        alert(s);
        //Debug:To check the current values : end
    })
})

Answer 2

var toggle = {
  cardiology: 0,
  respiratory: 0
}

$(function() {
  $('input[type="checkbox"]').bind('click',function() {
    toggle[this.id] = ~~($(this).is(':checked'));
  });
});

$(this).is(':checked') 返回 true/false。使用双位非运算符，您将得到 1 或 0。

编辑：您应该使用一个对象来存储切换状态，以便您可以动态访问它们。

Answer 3

动态变量？

if($(this).is(':checked')){
    window["toggle_"+this.id] = 1;
}

编辑：

缩短：

window["toggle_"+this.id] = ($(this).is(':checked'));