.toggleClass不工作

Question

我有我認爲是一個簡單的jQuery任務。我有一個手風琴。我沒有完全控制代碼，因爲它是一個WordPress的東西。

我給了手風琴標題下面的代碼：

<div class="teamTitle teamTitleDown">Jordan Gales | Job Title</div> 

然後，我說這個jQuery：

$(".accordion-title").click(function() { $(".teamTitle").toggleClass("teamTitle")}); 

的類添加fontAwesome圖標。它最初是一個留下的插入符號，然後當你點擊它時變成了一個插入的符號。

切換類只能使用一次。當我點擊時，我在檢查工具中看到班級teamTitle消失。在視覺上，我看到圖標從左側的字符變成了下面的字符。

但隨後的點擊沒有任何反應。我希望班級teamTitle在每次點擊時都可以打開/關閉。

我是否有代碼錯誤，或者我沒有正確理解toggleClass？

如果它的事項，下面是這兩個類的CSS：

.teamTitle:after { 
content: '\f0da'!important; 
font-family: FontAwesome; 
font-weight: normal; 
font-style: normal; 
margin:0px 0px 0px 10px; 
text-decoration:none; 
} 

.teamTitleDown:after { 
content: '\f0d7'; 
font-family: FontAwesome; 
font-weight: normal; 
font-style: normal; 
margin:0px 0px 0px 10px; 
text-decoration:none; 
} 

Answer 1

$(".teamTitle").toggleClass("teamTitle")}

這工作的第一次，因爲$('.teamTitle')要匹配的元素相匹配，並刪除了「teamTitle」來自他們的課程。

第二次不起作用，因爲$('.teamTitle')與任何元素都不匹配，因爲您已經刪除了您嘗試匹配的類名。

無論是存儲DOM元素的列表並重新使用它，而不是通過類名每次匹配：

var foo = $('.teamTitle'); 
// from now on, foo.toggleClass('teamTitle') will operate on the same elements (as long as foo remains in scope!) 

要不然就把額外的類名到那些你不會切換和關閉元素，用它來識別元素：

<div class="foo teamTitle teamTitleDown">Jordan Gales | Job Title</div> 

$('.foo').toggleClass('teamTitle') 

Answer 2

我想通了。菜鳥的錯誤。

我使用選擇器$（「。teamTitle」）進行切換，但之後我切換了相同的類。所以當我點擊一次後，它會切換該類。但是現在這個班已經不在了，所以我無法再選擇它了。

我只是改變爲$（「 teamTitleDown」），現在它工作得很好