javascript - 如何优化我的 if 语句或减少 if 语句？

Question

if(varName1 <= 1 && varName1 > 0)
{
$('#id1').addClass('ClassName');
}

if(varName2 <= 2 && varName2 > 1)
{
$('#id1').addClass('ClassName');
$('#id2').addClass('ClassName');
}


if(varName3 <= 3 && varName2 > 2)
{
$('#id1').addClass('ClassName');
$('#id2').addClass('ClassName');
$('#id3').addClass('ClassName');
}

所以基本上我想知道是否有更好的方法来使用更少的 if 语句（共有 8 个具有相同模式的语句）。

Answer 1

for (x = 1; x <= 3; x++) {
   if(varName[x] <= x && varName[x] > (x-1)) {
      $('#id[x]').addClass('ClassName');
   }
}

Answer 2

将您的选择器组合在一个语句中

if(varName1 <= 1 && varName1 > 0)
{
  $('#id1').addClass('ClassName');
}
if(varName2 <= 2 && varName2 > 1)
{
  $('#id1,#id2').addClass('ClassName');
}
if(varName3 <= 3 && varName2 > 2)
{
  $('#id1,#id2,#id3').addClass('ClassName');
}

Answer 3

完成任务的替代和最佳方法是将 if-else-if 替换为 switch 语句。您也可以使用三元，尽管它并没有太大的区别，只是代码大小会减少

switch( var ){ case 1: $('#id1').addClass('ClassName'); 休息;

case 2:
    $('#id1,#id2').addClass('ClassName');
    break;

case 3:
      $('#id1,#id2,#id3').addClass('ClassName');
      break;

default:
     break;

}

请注意，在 switch case 中，如果要执行所有用例，则应省略 break 语句。在这里，这个代码片段将只执行特定的用例，当它遇到不匹配的用例时，它会中断并退出循环。

Answer 4

var i = 0, $id;
while(i <= 3) {
    if(eval("varName" + i) <= i && eval("varName" + i) > (i - 1)) {
        $id = $("#id" + i).addClass("className");
    }
}

//But I recommend something like below (if that is your purpose):
$("div").each(function(_i, _self) {
    var $self = $(_self);
    if($self.hasClass("className")) {
        $self.addClass("className");
    }
});

Answer 5

一种优雅的方法是使用不需要 if 语句的 hashmap 或数组查找。

function getClassName( id ){
    var cssClassMap = {0: "aClassName", 1: "bClassName", 2: "dClassName", 3: "eClassName"};
    var cssClassName = cssClassMap[id];

   return ( cssClassName !== undefined ) ? cssClassName : "not-found";
}

$("id"+varName).addClass( getClassName( varName ) );

下面在 Chrome JS 控制台上进行测试