連載
» 2010年04月23日 00時00分 公開

連載:jQuery逆引きリファレンス:第6回 イベント編 (9/14)

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



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

連載目次


 toggleメソッドを利用することで、要素クリック時にイベント・リスナfnc1、fnc2、……を交互に呼び出すことができます。例えば、以下はクリックすることで3種類の画像を切り替えて表示する例です。

<script type="text/javascript">

$(function() {

  // 3種類の画像をクリックごとに切り替え表示
  $('img').toggle(

    // 1、4、7、……回目のクリック時に実行されるイベント・リスナ
    function() {
     $(this).attr('src', 'http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1.jpg');
    },

    // 2、5、8、……回目のクリック時に実行されるイベント・リスナ
    function() {
      $(this).attr('src', 'http://www.wings.msn.to/books/978-4-89100-624-2/978-4-89100-624-2.jpg');
    },

    // 3、6、9、……回目のクリック時に実行されるイベント・リスナ
    function() {
      $(this).attr('src', 'http://www.wings.msn.to/books/978-4-7980-2401-1/978-4-7980-2401-1.jpg');
    }
  );
});
</script>

  ……中略……

<img src="http://www.wings.msn.to/books/978-4-7980-2401-1/978-4-7980-2401-1.jpg" alt="" />

リスト098 3種類の画像をクリックごとに切り替え表示(Toggle.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


画像をクリック


画像をクリック


画像をクリックすると最初の画像に戻るリスト098の実行結果


 3種類の画像がクリックするたびに順に表示されることを確認してください。なお、toggleメソッドで定義されたイベント・リスナを解除するには、unbindメソッドを使って「unbind('click')」のように記述してください。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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