if語句不正常

Question

我似乎無法讓我的箭頭，在正確的方向顯示當摺疊項目摺疊或展開（JSFiddle）

代碼：

$('body').on("click", "span#expandcollapse", function() 
{ 
    $(this).text(function(i, currentText) 
    { 
     return currentText === 'Expand All' ? 'Collapse All' : 'Expand All'; 
    }); 

    if($(this).text() === 'Expand All') 
    { 
     //Currently collapsed 
     if($('.projectscontainer').find("div.destarrow").hasClass('arrow-right')) 
      $('.projectscontainer').find('div.destarrow').toggleClass("arrow-right arrow-down"); 
     $(".projectscontainer").find(".srcprojects").toggle(false); 
    } 
    else 
    { 
     //Currently expanded 
     $(".projectscontainer").find(".srcprojects").toggle(true); 
     if($('.projectscontainer').find("div.destarrow").hasClass('arrow-down')) 
      $('.projectscontainer').find('div.destarrow').toggleClass("arrow-down arrow-right"); 
    } 
}); 

此行沒有如預期運行：

if($('.projectscontainer').find("div.destarrow").hasClass('arrow-down')) 
     $('.projectscontainer').find('div.destarrow').toggleClass("arrow-down arrow-right"); 

當我點擊展開所有的項目應擴大（工作），箭頭應指向下（不工作）。當我點擊全部摺疊時，相反應該發生。 例如，如果我點擊其中一個綠色項目，然後點擊全部展開，則所點擊項目的箭頭方向不同。

我在做什麼錯？如果我有一個巨大的列表，是否有任何性能問題需要解決？謝謝！

Answer 1

這是一個工作JSFiddle。

您的問題實際上是一個事實，即下面的代碼

$('.projectscontainer').find("div.destarrow").hasClass('arrow-right') 

總是在這種特定的情況下，由於$返回true（「 projectscontainer」）。找到（‘div.destarrow’）返回的數組箭頭元素包含一些帶有箭頭的箭頭和右箭頭以及箭頭向下的箭頭，因此總是返回true。我重新考慮了使用過濾器的代碼。

Answer 2

注：tutiputes答案是正確的，與他們一起去。

這裏是一個工作fiddle

你改變了文本，然後檢查以前的狀態採取相應的行動。

存儲文本，並在更改後再次檢查。

var currText = $(this).text(); 
$(this).text(function(i, currentText){ 
    return currentText === 'Expand All' ? 'Collapse All' : 'Expand All'; 
}); 
if(currText === 'Expand All'){//Currently collapsed 

此外，您的切換是倒退。您想在展開時展開，反之亦然。

---

您問到性能問題。

http://jsfiddle.net/wuqes/2/

你可能會認爲有關存儲您的jQuery選擇這樣你就不會不斷地通過DOM生根。這不是一筆巨大的交易，但取決於未來項目的規模，它會派上用場。