.toggleClass not working

Question

私は単純なjqueryタスクと考えていました。私はアコーデオンを持っています。私はそれがワードプレスのものなので、コードの完全なコントロールを持っていません。

私はアコーディオンのタイトルにこのコードを与えた。その後

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

を、私はこのjQueryのを追加しました：

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

クラスはfontAwesomeアイコンを追加します。もともとは左のキャレットで、クリックするとキャレットになります。

トグルクラスは一度しか動作しません。クリックすると、inspectツールで、teamTitleクラスがなくなるのがわかります。視覚的には、アイコンが左のキャレットから下のキャレットに変わるのがわかります。

しかし、その後のクリックでは何も起こりません。私はクラスteamTitleをクリックするたびにオン/オフを切り替えることを期待しています。

コードエラーがありますか、またはtoggleClassを正しく理解できませんか？ $('.teamTitle')はあなたが一致する要素を一致するため、

.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」を削除します。それは重要な場合

は、ここでは、これらの二つのクラスのためのCSSです彼らからの階級。

$('.teamTitle')は、一致するクラス名を既に削除しているため、いずれの要素とも一致しないため、2回目は機能しません。

DOM要素のリストを格納し、classnameで代わりにマッチングのたびにそれを再利用する次のいずれか

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」）に変更し、今それがうまく