每个循环内的Jquery点击功能答案

【问题标题】：Jquery click function inside each loop每个循环内的Jquery点击功能
【发布时间】：2013-09-05 17:32:35
【问题描述】：

当我在本例中单击 .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>');
});
});

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

编辑：工作示例here。

缩放按钮应至少出现在图库中的前 2 张图像上（左上角）。如果它令人困惑，我试图让缩放按钮只出现在非常长/高的图像上。我也知道我应该拆分 setClass 函数，但还没有学会如何做到这一点:)

【问题讨论】：

您不应该在每个循环中绑定 .zoom 单击 - 您将多次执行相同的绑定（除非您添加了 $(this).closest('.zoom')）
.zoom 是什么.main 是什么，你也可以发布 html 吗？就像上面的皮特说的，你不必在每个里面都放点击处理程序
您正在为每个图像的每个 .zoom 元素添加一个点击侦听器。请向我们展示一些您的 html，以便我们提供更具体的帮助。
.main 是容器，.zoom 是根据每个循环内的不同参数注入的。 html 只是容器和带有图像的无序列表。对不起，我会把整个事情放到网上，但是还有很多其他的问题会分散大家的注意力！ :)
用工作示例更新了问题

标签： javascript jquery click each

【解决方案1】：

回答这个问题的人出于某种原因删除了他们的答案！关键是 .next()

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

【讨论】：

【解决方案2】：

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

【讨论】：

与我上面的代码具有相同的行为，我更新了示例 URL
附言。在 setClass 函数（以及每个循环）之外它什么都不做
如果您查看代码，您会看到它注入了 20 个 .big_image div，恰好正确的 div 位于顶部。
尝试在.zoom click 中提醒一些东西，你收到了多少次提醒信息？，它不应该在每个循环中！！