Question

我试图根据是否单击复选框来显示/隐藏元素。

如何改进我的代码（避免使用太多“if”）：

checkboxId= clickedcheckboxId;

if ( checkboxId== 0 ) {
    removeElements();
    $("#x1").fadeIn('fast');
}
else if ( checkboxId== 1 ) {
    removeElements();
    $("#y2").fadeIn('fast');
}
else if ( checkboxId== 2 ) {
    removeElements();
    $("#z3").fadeIn('fast');
}
else if ( checkboxId== 3 ) {
    removeElements();
    $("#w4").fadeIn('fast');
}

Answer 1

使用数组：

if (checkboxId >= 0 && checkboxId <= 3) {
  var a = ["x1", "y2", "z3", "w4"];
  removeElements();
  $("#"+a[checkboxId]).fadeIn('fast');
}

Answer 2

switch语句可用于检查变量的值并为每个值执行某些操作;它专门为此目的而设计。有关更具体的使用信息，请参阅The MDN's article on it

它比重复的if语句更通用，因为它包含后备和默认值

希望有所帮助

编辑：这是一个具体的例子：

checkboxId= clickedcheckboxId;
switch(checkboxId) {
    case 0:
        removeElements();
            $("#x1").fadeIn('fast');
            break;
        case 1:
            removeElements();
            $("#y2").fadeIn('fast');
            break;
        case 2:
            removeElements();
            $("#z3").fadeIn('fast');
            break;
        case 3:
            removeElements();
            $("#w4").fadeIn('fast');
            break;
}

Answer 3

你可以将它们分组

<div>
<input type="checkbox1" class="checkbox"/>
<div id="statment1" class="statment">
 </div>
</div>

$(".checkbox").click(function (){
   if($(this).is(':checked'))
   {
      $(this).parent().find(".statment").fadeIn(fast);
   }
   else{
      $(this).parent().find(".statment").fadeOut(fast);
    }

});

Answer 4

<input type='checkbox' onChange='anyFunction();'>

通过这种方式，您可以更好地控制正在发生的事情。

根据复选框点击状态更新元素

4 个答案: