第2回 属性＆コンテンツ編：連載：jQuery逆引きリファレンス（9/19 ページ）
特定のスタイル・クラスを適用したり解除したりを交互に行うことはよくあります。そのような処理は、addClass／removeClassメソッドでも行えますが、具体的なサンプルを見ても分かるように、コードが冗長になりがちです。このようなケースでは、toggleClassメソッドを利用することをお勧めします。
toggleClassメソッドは、指定されたスタイル・クラスが適用されている場合にはそのクラスを破棄し、適用されていない場合には追加します。
以下は、ボタンをクリックすることで、背景色を青／白と交互に切り替えるためのサンプルです。同様の機能をaddClass／removeClassメソッドで記述したAddClass.htmlとも比較してみると、より理解が深まるでしょう。
<style type="text/css">
.bg_b { background-color: Blue; }
</style>
……中略……
<script type="text/javascript">
$(function() {
// ボタンクリック時の挙動
$('#c_change').click(
function() {
$('body').toggleClass('bg_b'); // スタイルの切り替え
}
);
});
</script>
……中略……
<input type="button" id="c_change" value="背景色を変更" />
このHTMLを実際にブラウザで開く
リスト035の実行結果なお、jQuery 1.3からは、toggleClassメソッドの第2引数にブール値（true／false）を指定できるようになりました。従来、toggleClassメソッドは無条件に適用／解除を交互に繰り返すだけでしたが、第2引数を指定することで、適用／解除を自分で制御できます（trueで追加、falseで解除）。
以下は、ボタンをクリックしたときに乱数を求め、その値が0.5より大きい場合はスタイルを適用、0.5以下である場合には解除するサンプルです。
<style type="text/css">
.bg_b { background-color: Blue; }
</style>
……中略……
<script type="text/javascript">
$(function() {
// ボタンクリック時の処理
$('#c_change').click(
function() {
// 乱数（0〜1）を求め、0.5より大きい場合はtrue、
// 0.5以下の場合はfalse
var flag = Math.random() > 0.5 ? true : false;
// フラグの値に応じて、クラスを適用、または解除
$('body').toggleClass('bg_b', flag);
}
);
});
</script>
……中略……
<input type="button" id="c_change" value="背景色を変更" />
このHTMLを実際にブラウザで開く
今度は、ボタンクリック時に（交互ではなく）ランダムに背景色が変化することが確認できます。
Copyright© Digital Advantage Corp. All Rights Reserved.
ITmediaはアイティメディア株式会社の登録商標です。