Javascript Jquery在每个循环中单击函数

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

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

$（'.main img'）。每个（函数（）{
var img=此；
$（'.zoom'）。单击（函数（）{
$（本）。在（''）之后；
});
});

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

编辑：工作示例。

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

如果它必须在循环内。尝试修改您的代码，如下所示

 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;
   });
 });

var标志=false；
$（'.main img'）。每个（函数（）{
var img=此；
$（'.zoom'）。单击（函数（）{
如果（！标志）
$（本）。在（''）之后；
flag=true；
});
});

回答此问题的人出于某种原因删除了他们的答案！关键是.next（）

var img=this；
$（此）。下一步（'.zoom'）。单击（函数（）{
$（本）。在（''）之后；
});

你不应该绑定

.zoom

在每个循环中单击-你将多次执行相同的绑定操作（除非你添加了$（this）.最近（'.zoom'））什么是

.zoom

什么是

.main

，你也可以发布html吗？正如上面pete所说，您不必在每个图像中都放置click处理程序，而是为每个图像的.zoom元素添加一个click侦听器。请向我们展示一点您的html，以便我们提供更具体的帮助。main是容器。zoom是根据每个循环中的不同参数注入的。html只是一个容器和一个带有图像的无序列表。很抱歉，我会把整个事情放到网上，但它还有很多其他问题，会分散大家的注意力使用与上面代码具有相同行为的working example更新了问题，我更新了示例URLPS。在setClass函数外部（以及每个循环），它没有任何作用。如果你查看代码，你会看到它注入了一个20。big_image divs，恰好正确的一个在顶部。尝试警告内部的某个东西。缩放单击，你得到警告消息的次数？它不应该在每个循环内！！

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;
   });
 });

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