イベントを設定したい要素はひとつとは限らない場合が
多々あります。
今回は、eqセレクターを使って、複数のa要素に対して
それぞれ異なるクリックイベントを設定しています。
eqセレクターは以前も紹介しましたが、指定した順番の要素を
取得するセレクターです。
実行結果はこちらです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} #container{ width:640px; height:400px; font-weight:100; margin:0 auto;} li{margin:10px;} </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <div id="container"> <ul> <li><a href="mikenoko.jpg">三毛猫</a></li> <li><a href="shironoko.jpg">白猫</li> <li><a href="kuronoko.jpg">黒猫</li> <li><a href="buchinoko.jpg">ぶち猫</li> </ul> <p><img src="mikeneko.jpg" width="100" height="100" alt=""></p> </div><!--contatiner--> <script> $(document).ready(function(){ /* $("a:eq(0)").click(function(){ $("img").attr("src","mikenoko.jpg").attr("alt","三毛猫"); return false; }); $("a:eq(1)").click(function(){ $("img").attr("src","shironoko.jpg").attr("alt","白猫"); return false; }); $("a:eq(2)").click(function(){ $("img").attr("src","kuronoko.jpg").attr("alt","黒猫"); return false; }); $("a:eq(3)").click(function(){ $("img").attr("src","buchinoko.jpg").attr("alt","ぶち猫"); return false; }); */ $("a").click(function(){ $("img").attr("src",$(this).attr("href")) .attr("alt",$(this).text()); return false; }); }); </script> </body> </html> |
画像を変更する機能は付けることができましたが、
この表示している画像が10,20になると大変です。
そんなときに便利なのが、イベントが発生した要素を
取得するセレクター、$(this)です。
イベントを設定している click(function(){..}内で
$(this)と書くことで、イベントが発生した要素を
取得することが可能です。$(this)を使用すれば、
以下のように短くできます。
サンプルコードの36行目~51行名の処理と
53行目~57行目の処理は同一の処理です。
サンプルコードの53行目~57行目は、
クリックされた要素のhref属性の$(this).attr("href")を
指定して、クリックされた$(this)はclickイベント以外でも
使え、役に立ちます。