激活两次时jQuery代码加倍动作答案

【问题标题】：jQuery code doubling up action when activated twice激活两次时jQuery代码加倍动作
【发布时间】：2013-09-26 08:25:15
【问题描述】：

我编写的某些代码有问题。这个想法是使用 jQuery 创建一个自定义的“灯箱”。当我单击缩略图时，代码会查看具有“data-first-img-url”、“data-second-img-url”和“data-third-img-url”属性的 div——这些属性包含成为弹出式画廊背景图片的网址。

但是，我遇到的问题是，当我关闭弹出窗口并单击以重新打开它时，图像现在出现了两次。

这是我的 jQuery：

$('.gallery').click(function() {
$('#overlay').fadeIn().append('<div class="main_image"></div><div class="second_image"></div><div class="third_image"></div>');
$main_img_url = $(this).attr('data-first-img-url');
$second_img_url = $(this).attr('data-second-img-url');
$third_img_url = $(this).attr('data-third-img-url');

$('.main_image').css("background-image", "url('" + $main_img_url + "')");
$('.second_image').css("background-image", "url('" + $second_img_url + "')");
$('.third_image').css("background-image", "url('" + $third_img_url + "')");

});

$(".close_gallery").click(function() {
$('#overlay').fadeOut();

});

还有一个 JSfiddle（简化版）：http://jsfiddle.net/9d9sz/3/

您可以看到，当您单击图像时，它可以正常工作，但随后关闭弹出窗口并重新打开，它会出现两次。

【问题讨论】：

标签： jquery css append this attr

【解决方案1】：

试试这个，每次打开它都会添加一个新图像，在添加新图像之前删除它们

$('.gallery').click(function() {
    $('.main_image').remove();

DEMO

【讨论】：

【解决方案2】：

您的淡入淡出，但每次您将 html 附加回页面。

在页面上创建 div 并使其 style="display:none;"然后在您的点击功能中，您需要做的就是引用 div 并将其淡入。

【讨论】：

【解决方案3】：

这是因为您将 div 附加了两次，而没有在关闭时将其删除。

试试：

$('#overlay').find('.main_image').remove().end().fadeIn().append('<div class="main_image"></div><div class="second_image"></div><div class="third_image"></div>');

但可能比一直添加和删除 DOM 元素更好的是一直保留它并在需要时隐藏/显示。

【讨论】：