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

2015年8月3日

イベントを設定したい要素はひとつとは限らない場合が
多々あります。

今回は、eqセレクターを使って、複数のa要素に対して
それぞれ異なるクリックイベントを設定しています。
eqセレクターは以前も紹介しましたが、指定した順番の要素を
取得するセレクターです。

実行結果はこちらです。

<!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>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

font-weight:100;

margin:0 auto;}

li{margin:10px;}

</style>

</head>

<body>

<ul>

</ul>

</div>

$(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>

画像を変更する機能は付けることができましたが、
この表示している画像が１０，２０になると大変です。

そんなときに便利なのが、イベントが発生した要素を
取得するセレクター、$(this)です。

イベントを設定している click(function(){..}内で
$(this)と書くことで、イベントが発生した要素を
取得することが可能です。$(this)を使用すれば、
以下のように短くできます。

サンプルコードの３６行目～５１行名の処理と
５３行目～５７行目の処理は同一の処理です。

サンプルコードの５３行目～５７行目は、
クリックされた要素のhref属性の$(this).attr("href")を
指定して、クリックされた$(this)はclickイベント以外でも
使え、役に立ちます。