0

我编写的一些代码有问题。这个想法是使用 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/

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

4

3 回答 3

1

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

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

演示

于 2013-09-26T08:27:43.993 回答
0

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

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

于 2013-09-26T08:30:16.733 回答
0

这是因为您将 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 元素更好的是一直拥有它并在需要时隐藏/显示。

于 2013-09-26T08:30:34.737 回答