點擊圖片導入

<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，我想導入另一張圖片，那麼會怎麼做？

來源

2013-10-17 user1234440

爲什麼你不只是把事件放在圖像上，所以你會我直接知道哪一個被點擊了......？ – CBroe

你的事件處理程序被附加到'div'，所以'this'指向什麼。（...）;' – BYossarian

如果說我點擊了'img1'，怎麼會導入一個圖像呢？ – user1234440

您有一個點擊偵聽器，其目標爲<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

或者你可以改用$(".leftThumbNail img").on("click", function(){，那麼你可以只使用alert(this.id);因爲this將是img元素。

要更改圖像你可以使用：

var new_image_url = 'new.jpg'; 
this.src = new_image_url; // or event.target.src, depending on the 2 options above

來源

2013-10-17 22:25:23 Sergio

嘗試使用被傳遞的元素（e.target.id）這樣說：

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

jsFiddle example

來源

2013-10-17 22:25:27 j08691

點擊圖片導入

回答

相關問題