每個循環內的jQuery click函數

Question

在此示例中，單擊.zoom時，將注入20（循環中的項目數量）.big_image div。 我只想插入一個相對於我單擊的項目。

$('.main img').each(function() {
var img = this;
$('.zoom').click(function() {
    $(this).after('<div class="big_image"><img src="'+$(img).attr('src')+'"></div>');
});
});

我在這里簡化了腳本。 理想情況下，我想知道如何修改點擊功能（如果可能），因為還有其他與問題無關的事情。 謝謝！

編輯： 這里的工作示例。

縮放按鈕應至少出現在圖庫中的前2張圖像中（左上角）。 如果令人困惑，我試圖將“縮放”按鈕僅顯示在非常長/高的圖像上。 我也知道我應該拆分setClass函數，但還沒學會如何做:)

Answer 1

$('.zoom').click(function(e){
     var imgURL= $(this).parents('.main').find('img').attr('src');
     $(this).after('<div class="big_image"><img src="'+imgURL+'"></div>')
});

如果.main容器是img和.zoom的直接父級，則可以使用

var imgURL= $(this).siblings('img').attr('src');

是否必須在循環內。 嘗試如下修改您的代碼

 var flag=false;
 $('.main img').each(function() {
   var img = this;
    $('.zoom').click(function() {
     if(!flag)
        $(this).after('<div class="big_image"><img src="'+$(img).attr('src')+'"></div>');
     flag=true;
   });
 });

Answer 2

回答此問題的人出於某種原因取消了答案！ 關鍵是.next（）

var img = this;
$(this).next('.zoom').click(function() {
    $(this).after('<div class="big_image"><img src="'+$(img).attr('src')+'"></div>'); 
});