如何更好地执行 Jquery if-else 语句

Question

有没有办法改进下面的 if else 语句：

function updateStatusCount(){
    var openCount = 0;
    var ongoingCount = 0;
    var atRiskCount = 0;
    var missedCount = 0;
    var closedCount = 0;
    var onHoldCount = 0;
    $('.sr-header-status').each(function(){
        var value = $(this).html().toLowerCase();
        if(value === "open"){
            openCount = openCount + 1;
        } else if (value === "ongoing"){
            ongoingCount = ongoingCount + 1;
        } else if (value === "at risk"){
            atRiskCount = atRiskCount + 1;
        } else if (value === "missed target"){
            missedCount = missedCount + 1;
        } else if (value === "closed"){
            closedCount = closedCount + 1;
        } else if (value === "on hold"){
            onHoldCount = onHoldCount + 1;
        }
    });
    $('.statusCount').empty();
    $('.open.status_filter').find('span.statusCount').html(openCount);
    $('.ongoing.status_filter').find('span.statusCount').html(ongoingCount);
    $('.atrisk.status_filter').find('span.statusCount').html(atRiskCount);
    $('.missedtarget.status_filter').find('span.statusCount').html(missedCount);
    $('.closed.status_filter').find('span.statusCount').html(closedCount);
    $('.onhold.status_filter').find('span.statusCount').html(onHoldCount);
}

我在想这样的事情

function updateStatusCount(){
    getStatusCount("open");
    getStatusCount("ongoing");
    getStatusCount("on hold");
    getStatusCount("at risk");
    getStatusCount("missed target");
    getStatusCount("closed");
}

function getStatusCount(status){
    var count = 0;
    var statusClass = "."+status.replace(/ /g,'');
    var $statusContainer = $(statusClass).find('span.statusCount');
    $('.sr-header-status').each(function(){
        var value = $(this).html().toLowerCase();
        if(value === status){
            count = count + 1;
        }
    });
    $statusContainer.empty();
    $statusContainer.html(count);
}

但哪个更好？

谢谢

Answer 1

如果您的用例有限，那么使用switch 语句似乎可以创建更简单易读的代码。我也做了一些代码重构。

function updateStatusCount(){
    var openCount = ongoingCount = atRiskCount = missedCount =
        closedCount = onHoldCount = 0;

    $('.sr-header-status').each(function(){
        switch ($(this).html().toLowerCase()) {
          case "open":          ++openCount;    break;
          case "ongoing":       ++ongoingCount; break;
          case "at risk":       ++atRiskCount;  break;
          case "missed target": ++missedCount;  break;
          case "closed":        ++closedCount;  break;
          case "on hold":       ++onHoldCount;
        }
    });
    $('.statusCount').empty(); // only need this line if there is other .statusCount not defined below
    $('.open.status_filter span.statusCount').html(openCount);
    $('.ongoing.status_filter span.statusCount').html(ongoingCount);
    $('.atrisk.status_filter span.statusCount').html(atRiskCount);
    $('.missedtarget.status_filter span.statusCount').html(missedCount);
    $('.closed.status_filter span.statusCount').html(closedCount);
    $('.onhold.status_filter span.statusCount').html(onHoldCount);
}

解决方案 2 在 jQuery 1.8+ 中你可以定义一个新的选择器：

$.expr[":"].containsNoCase = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toLowerCase().indexOf(arg.toLowerCase()) >= 0;
    };
});

或者这个，如果你的 jquery 比较老：

$.expr[':'].containsNoCase  = function(a, i, m) { 
  return $(a).text().toLowerCase().indexOf(m[3].toLowerCase()) >= 0; 
};

最后你的函数可以简化为

function getStatusCount(status){
    var statusClass = "." + status.replace(/ /g,''),
        $statusContainer = $(statusClass).find('span.statusCount');
    $statusContainer.text($('.sr-header-status:containsNoCase("' + status + '")').length);
}

Answer 2

您可以使用对象作为查找机制，让对象查找为您处理所有比较，而不是单独编码每个比较：

function updateStatusCount(){
    var counts = {
        "open": 0, "ongoing": 0, "at risk": 0,
        "missed target": 0, "closed": 0, "on hold": 0
    }
    $('.sr-header-status').each(function(){
        counts[$(this).html().toLowerCase()]++; 
    });
    $('.statusCount').empty();
    $('.open.status_filter').find('span.statusCount').html(counts["open"]);
    $('.ongoing.status_filter').find('span.statusCount').html(counts["ongoing"]);
    $('.atrisk.status_filter').find('span.statusCount').html(counts["at risk"]);
    $('.missedtarget.status_filter').find('span.statusCount').html(counts["missed target"]);
    $('.closed.status_filter').find('span.statusCount').html(counts["closed"]);
    $('.onhold.status_filter').find('span.statusCount').html(counts["on hold"]);
}

或者，您可以通过生成您要查找的类名来变得更聪明：

function updateStatusCount(){
    var counts = {
        "open": 0, "ongoing": 0, "at risk": 0,
        "missed target": 0, "closed": 0, "on hold": 0
    }
    $('.sr-header-status').each(function() {
        counts[$(this).html().toLowerCase()]++; 
    });
    $('.statusCount').empty();
    for (var prop in counts) {
        $("." + prop.replace(/\s/g, "") + ".status_filter" + " span.statusCount").html(counts[prop]);
    }
}

Answer 3

改用switch：

   $('.sr-header-status').each(function(){
    var value = $(this).html().toLowerCase();

switch(value){
case "open":
    openCount = openCount + 1;
break;

case "at risk":
    atRiskCount = atRiskCount + 1;
break;

case "missed target":
   missedCount = missedCount + 1;
break;
//and so on
.......
}});