Web制作の現場で使えるjQuery　UIデザイン入門 ― 第6回

jQueryのイベントをチュートリアルで学ぶ（前編） (3/6)

■イベントが発生した要素を取得する

　前ページでイベントの基本的な使い方を紹介しましたが、イベントを設定したい要素は1つとは限りません。複数の要素に対して設定したい場合もあります。

　次のサンプル05は、eqフィルターを利用して複数のa要素に対してそれぞれ異なるクリックイベントを設定しています。eqフィルターは特定の要素のうち、指定した順番の要素を取得するセレクターでした（関連記事）。

▼サンプル05（(X)HTML部分）

<ul>
    <li><a href="fower.jpg">花</a></li>
    <li><a href="sea.jpg">海</a></li>
    <li><a href="Jellyfish.jpg">くらげ</a></li>
    <li><a href="Building.jpg">建物</a></li>
</ul>
<p><img src="flower.jpg" alt="花" /></p>

▼サンプル05（スクリプト部分）

$(function(){
    $("a:eq(0)").click(function(){
        $("img").attr("src","flower.jpg").attr("alt","花");
        return false;
    })
    $("a:eq(1)").click(function(){
        $("img").attr("src","sea.jpg").attr("alt","海");
        return false;
    })
    $("a:eq(2)").click(function(){
        $("img").attr("src","Jellyfish.jpg").attr("alt","くらげ");
        return false;
    })
    $("a:eq(3)").click(function(){
        $("img").attr("src","Building.jpg").attr("alt","建物");
        return false;
    })
})

▼サンプル05（実行結果）

サンプル05の実行画面。a要素をクリックすると画像が変更される

　画像を変更する機能は実装できましたが、このままだとコードがかなり長い上に、あとで変更する場合にややこしくなります。a要素の出現順が変更されたらeqフィルターの番号を変更しなくてはなりませんし、項目が追加されたらその分プログラムを追加しなくてはいけません。

　そこで便利なのが、イベントが発生した要素を取得するセレクター $(this) です。イベントを設定している click(function(){...})内 で $(this) と書くと、イベントが発生した要素を取得できます。 $(this) を使えば、先ほどの長いプログラムを以下のように短く記述できます。

▼サンプル06（スクリプト部分）

$(function(){
    $("a").click(function(){
        $("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
        return false;
    })
})

　このサンプルでは、$(this).attr("href") でクリックされた要素のhref属性、$(this).text() でクリックされた要素内のテキストを取得し、それぞれimg要素のsrc属性、alt属性に設定しています。これならソースコードもすっきりしますし、li要素の数や順番を変えたい場合も(X)HTMLを書き換えるだけで済みます。

　イベントが発生した要素を取得する $(this) はクリックイベント以外でも重宝しますので覚えておきましょう。