JQuery 测验应用程序 - 使用 <id> 标签来切换变量的开/关

Posted 2023-03-15

【中文标题】JQuery 测验应用程序 - 使用 <id> 标签来切换变量的开/关

【英文标题】：JQuery quiz app - use <id> tag to toggle variable on/off

【发布时间】：2011-03-18 15:59:57

【问题描述】：

我正在编写一个 jquery phonegap 测验应用程序，并且有许多类别，用户可以通过复选框从中选择。然后返回属于这些类别的相关问题。但是，如果选中该类别的复选框，我有两个巨大的 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

谢谢，尼克。

【参考方案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
    )
)

【讨论】：

感谢 amit_g 这正是我想要的！尼克

【参考方案2】：

var toggle = 
  cardiology: 0,
  respiratory: 0


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

$(this).is(':checked') 返回真/假。使用双位非运算符，你得到 1 或 0。

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

【讨论】：

感谢您的回复 - 将记住双位 NOT 运算符以供将来编码，以前不会遇到它。尼克

【参考方案3】：

动态变量？

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

编辑：

缩短：

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