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

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

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

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

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

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

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

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

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

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

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

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

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

すべての li 要素に対して、クラス www がなければ追加し、あれば削除してください。