尋找比這個IF，ELSEIF，ELSE方法更好的解決方案

Question

這段代碼很有效，但我確定有一個更高效的方法來完成這個功能，這個功能在我的新手級別上面可能有幫助。

我正在改變按類型的div計數的按鈕標籤文本字符串。如果計數爲零，則按鈕被隱藏。如果計數等於1，則該術語是單數。如果計數大於1，則該術語是複數。

var countAll = $('li.posts').size(); 
var countText = $('div.text').size(); 
var countPhoto = $('div.photo').size(); 
var countQuote = $('div.quote').size(); 
var countLink = $('div.link').size(); 
var countChat = $('div.chat').size(); 
var countAudio = $('div.audio').size(); 
var countVideo = $('div.video').size(); 
var countAnswer = $('div.answer').size(); 
var countConversation = $('div.conversation').size(); 


$('.showAll').html("show all " + countAll + " posts "); 

if (countText == 1) { 
     $('.showText').html(countText + " text"); 
    } else if (countText > 1) { 
     $('.showText').html(countText + " texts"); 
     } else { 
     $('.showText').hide(); 
    }; 

if (countPhoto == 1) { 
     $('.showPhoto').html(countPhoto + " photo"); 
    } else if (countPhoto > 1) { 
     $('.showPhoto').html(countPhoto + " photos"); 
     } else { 
     $('.showPhoto').hide(); 
    }; 

if (countQuote == 1) { 
     $('.showQuote').html(countQuote + " quote"); 
    } else if (countQuote > 1) { 
     $('.showQuote').html(countQuote + " quotes"); 
     } else { 
     $('.showQuote').hide(); 
    }; 

if (countLink == 1) { 
     $('.showLink').html(countLink + " link"); 
    } else if (countLink > 1) { 
     $('.showLink').html(countLink + " links"); 
     } else { 
     $('.showLink').hide(); 
    }; 

if (countChat == 1) { 
     $('.showChat').html(countChat + " chat"); 
    } else if (countChat > 1) { 
     $('.showChat').html(countChat + " chats"); 
     } else { 
     $('.showChat').hide(); 
    }; 

if (countAudio == 1) { 
     $('.showAudio').html(countAudio + " audio"); 
    } else if (countAudio > 1) { 
     $('.showAudio').html(countAudio + " audios"); 
     } else { 
     $('.showAudio').hide(); 
    }; 

if (countVideo == 1) { 
     $('.showVideo').html(countVideo + " video"); 
    } else if (countVideo > 1) { 
     $('.showVideo').html(countVideo + " videos"); 
     } else { 
     $('.showVideo').hide(); 
    }; 

if (countAnswer == 1) { 
     $('.showAnswer').html(countAnswer + " answer"); 
    } else if (countAnswer > 1) { 
     $('.showAnswer').html(countAnswer + " answers"); 
     } else { 
     $('.showAnswer').hide(); 
    }; 

if (countConversation == 1) { 
     $('.showConversation').html(countConversation + " conversation"); 
    } else if (countConversation > 1) { 
     $('.showConversation').html(countConversation + " conversations"); 
     } else { 
     $('.showConversation').hide(); 
    }; 

在此先感謝您的幫助！仍在學習。

Answer 1

有改善這種代碼的兩個關鍵方面：

1. 使用函數或for循環刪除重複的代碼。
2. 使用三元刪除else if

功能/ For循環

你重複的代碼結構數次。做到這一點的最佳方法是編寫一次代碼，並使其多次執行。我將利用函數和for循環。 你的基本結構總是相同的 - 拿一個div標籤，得到尺寸，然後編輯一個類標籤.show<name>。

三元

三元構建工作的if-else-return的基礎上，在1線相符。它會給你基於布爾測試的兩個值之一。例如：

if (number>1) return "votes" else return "vote"` 

此語法爲((test) ? "value-if-true" : "value-if-false")。

您的最終產品：

$('.showAll').html("show all " + $('li.posts').size() + " posts "); 

var counts = ["text", "photo", "quote", "link", "chat", "audio", "video", "answer", "conversation"]; 

function showcount(name) { 
    var divcount = $("div."+name).size() 
    var classname = ".show" + name.charAt(0).toUpperCase() + name.slice(1); 
    if (divcount >= 1) { 
     $(classname).html(divcount + " " + name + ((divcount==1) ? "" : "s")); 
    } 
    else { 
     $(classname).hide(); 
    } 
} 

for (var i=0; i<counts.length; i++) { 
    showcount(counts[i]); 
} 

我沒有測試過這一點;請讓我知道它是否工作或其他。

Answer 2

在這種情況下，你可以使用將獲得選擇和文本的常用方法：

var countAll = $('li.posts').size(); 
$('.showAll').html("show all " + countAll + " posts "); 
//Call the provided method foreach of your divs and links, one call for each, 
// instead of the relevant .size() and IF..ELSE blocks 
SetVisibilityAndText('div.text', '.showText','text'); 
SetVisibilityAndText('div.photo', '.showPhoto', 'photo'); 
//etc for your other selectors/divs 

function SetVisiblityAndText(countSelector, linkSelector, text){ 
var count = $(countSelector).size(); 
    if (count == 1) {   
    $(linkSelector).html(count + " " +text);  
    } 
    else if (count > 1) {   
    $(linkSelector).html(count + " "+ text+ "s");  
    } 
    else 
    {   
     $(linkSelector).hide();  
    }; 
} 

Answer 3

您可以集中所有的你的邏輯在一個單一的功能：

function check(count, el){ 
var $el = $(el); 
if (count == 1) { 
     $(el).html(count + " text"); 
    } else if (count > 1) { 
     $el.html(count + " texts"); 
    } else { 
     $el.hide(); 
    } 
} 

然後使用：

check(countText, '.showText'); 
check(countPhoto, '.showPhoto'); 
//.... 

Answer 4

你可以做這樣的事情：

HTML：

<label class='show' id='photo'> 
<div class='photo'></div>.. etc 

JS：

$('label.show').each(function(){ 
    var id = $(this).attr('id'); 
    var count = $('div.'+id).count(); 
    var mul = (count > 1) ? 's' : ''; 
    $(this).html(count+' '+id+mul); 
}); 

我敢肯定，這可能會更好看......