jQueryにおけるtoggleClassメソッドの使い方

指定したクラスがなければ追加し、あれば削除する便利なメソッド、 toggleClassもあります。 これは、同じボタンをクリックしてページ要素に周期的な変化を起こす場合に役立つかもしれません。

例を使ってこのメソッドを見てみましょう。以下のCSSスタイルがあるとします：

css.red {
  color: red;
}
  
.zzz {
  font-style: italic;
}

また、クラス zzz を持つ段落があります：

html<p class="zzz" id="test">text</p>
<button>click</button>

例えば、ボタンを最初にクリックしたときに要素にクラス red （赤色を追加する）を追加し、もう一度クリックしたときにこのクラスを削除して 赤色を消すようにしてみましょう。もう一度ボタンを押すと、すべてが再び繰り返されます。

次のコードを実行して確認してください（クラス zzz は イタリックで表示され、 toggleClassが他のクラスの動作を妨げないことを示しています）：

javascript$('button').click(function() {
  $('#test').toggleClass('red');
});

最初のクリック後、HTMLコードは次のようになります（クラス red が追加されます）：

html<p class="zzz red" id="test">text</p>
<button>click</button>

2回目のクリック後は、次のようになります（クラス red が消えます）：

html<p class="zzz" id="test">text</p>
<button>click</button>