如何优化我的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

完成任务的备用和最佳方法是使用switch语句替换if-else-if。您也可以使用三元，但除了代码大小会减少之外它没有太大的区别

switch（var）{    情况1：        $（ '＃ID1'）addClass（ '类名'）。        打破;

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语句。

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控制台上的测试