我是否可以通过以下方式改进此if if语句:
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);
}
但哪个更好?
谢谢
答案 0 :(得分:4)
您可以使用对象作为查找机制,让对象查找为您处理所有比较,而不是单独编写每个对象:
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]);
}
}
答案 1 :(得分: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);
}
答案 2 :(得分:0)
改为使用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
.......
}});