0 
<div class="leftThumbNail">   
    <img id = "img1" src="img/thumb/image1.jpg" class = "image1Position" alt="Image 1">
    <img id = "img2" src="img/thumb/image2.jpg" class = "image2Position" alt="Image 2" >
</div>

上記は、2 つのイメージが格納されているクラスを表しています。2 つの画像のいずれかをクリックすると反応するようにレイアウトされています。

$(".leftThumbNail").on("click", function(){ 
    var img = $(this).find("img"), // select images inside thumbnail,but which one?
    alert(this.id); //prints empty for some reason, I want to have it print the one I clicked on within the class such that I can import a specific image after it is clicked.
});

クリックしたクラス内のどの画像を特定するにはどうすればよいですか? をクリックしてimg1、別の画像をインポートしたいとします。

4

2 に答える 2

2

を対象とするクリック リスナーがあります。<div class="leftThumbNail>つまりthis.id、空です。event.targetの代わりに使用しthisます。

これを試して：

$(".leftThumbNail").on("click", function(event){ 
    var img = event.target, // select images inside thumbnail
    alert(img.id); 
});

MDNで詳細をevent.target読む

または、代わりに を使用することもできますが、要素になるという理由$(".leftThumbNail img").on("click", function(){だけで使用することもできます。alert(this.id);thisimg

画像を変更するには、次を使用できます。

var new_image_url = 'new.jpg';
this.src = new_image_url; // or event.target.src, depending on the 2 options above
于 2013-10-17T22:25:23.087 に答える
1

渡された要素 ( e.target.id) を次のように使用してみてください。

$(".leftThumbNail").on("click", function(e){ 
    console.log(e.target.id); 
});

jsFiddle の例

于 2013-10-17T22:25:27.510 に答える