第7回 エフェクト編：連載：jQuery逆引きリファレンス（5/19 ページ）
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>
このHTMLを実際にブラウザで開く
リスト107の実行結果Copyright© Digital Advantage Corp. All Rights Reserved.
ITmediaはアイティメディア株式会社の登録商標です。