Question

当我在这个例子中单击.zoom时，我注入20（循环中的项目数量）.big_image divs。我只想插入一个，相对于我点击的项目。

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

我在这里简化了脚本。理想情况下，我只想知道如何修改点击功能（如果可能），因为还有其他与问题无关的事情。谢谢！

编辑：工作示例here。

缩放按钮应至少显示在图库中的前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>'); 
});

Jquery在每个循环内单击函数

2 个答案: