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>

上面表示一个类，其中存储了两个图像。它的布局使得每当我点击两个图像中的以太之一时，它都会做出反应。

$(".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); 
});

event.target在MDN上阅读更多信息

或者你可以使用 instead $(".leftThumbNail img").on("click", function(){，然后你可以使用 just alert(this.id);because thiswould be the imgelement。

要更改图像，您可以使用：

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 回答