第7回 エフェクト編：連載：jQuery逆引きリファレンス（5/19 ページ）

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

連載目次

　toggle(switch)メソッドは、引数switchがtrueの場合は要素を表示状態に、falseの場合は非表示状態にします。標準的なtoggle([speed [,fnc]])メソッドの挙動は要素の表示／非表示を交互に切り替えますが、アプリケーション側で任意のルールを設定したい場合などにはtoggle(switch)メソッドを使用します。

　具体的な例を見てみましょう。以下は、画像の表示／非表示を乱数でランダムに決定するサンプルです。0〜100の乱数を生成し、それが偶数であった場合には画像を表示状態に、奇数の場合は非表示状態にします。

<script type="text/javascript">

$(function() {

  $(':button').click(function() {

    // 0〜100の乱数を求める
    var tmp = Math.ceil((Math.random() * 100));

    // 乱数が偶数／奇数であるかによって表示／非表示を決定
    $('div').toggle(tmp % 2 == 0);
  });
});

</script>

  ……中略……

<input type="button" value="表示／非表示" />
<div>
  <img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="ASP.NET" />
</div>
</body>

リスト107 画像の表示／非表示をランダムに決定（Toggle2.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

ボタンをクリック

リスト107の実行結果