第6回 イベント編：連載：jQuery逆引きリファレンス（9/14 ページ）

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

連載目次

　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')」のように記述してください。