連載
» 2009年11月13日 00時00分 公開

連載:jQuery逆引きリファレンス:第2回 属性&コンテンツ編 (9/19)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 特定のスタイル・クラスを適用したり解除したりを交互に行うことはよくあります。そのような処理は、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を実際にブラウザで開く

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

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。