0

在此示例中单击 .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 函数，但还没有学会如何做到这一点:)

4

2 回答 2

0 
$('.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;
   });
 });
于 2013-09-02T15:27:14.170 回答
0

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

var img = this;
$(this).next('.zoom').click(function() {
    $(this).after('<div class="big_image"><img src="'+$(img).attr('src')+'"></div>'); 
});
于 2013-09-03T14:34:06.780 回答