第2回 属性＆コンテンツ編：連載：jQuery逆引きリファレンス（9/19 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　特定のスタイル・クラスを適用したり解除したりを交互に行うことはよくあります。そのような処理は、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="背景色を変更" />

リスト035 ボタンクリック時に、背景色を青／白と交互に切り替え（ToggleClass.html）
この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="背景色を変更" />

リスト036 ボタンクリック時に、背景色がランダムに青／白に変化（ToggleClass2.html）
このHTMLを実際にブラウザで開く

　今度は、ボタンクリック時に（交互ではなく）ランダムに背景色が変化することが確認できます。