Question

我遇到了一些我编程的代码问题。我们的想法是使用jQuery创建一个自定义的“灯箱”。当我点击缩略图时，代码会查看div，其中包含“data-first-img-url”，“data-second-img-url”和“data-third-img-url”属性 - 这些属性包含网址成为弹出画廊的背景图片。

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

这是我的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/

你可以看到，当你点击图像一旦它工作正常，但然后关闭弹出窗口并重新打开，它就在那里两次。

Answer 1

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

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

DEMO

Answer 2

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

在页面上创建div并使其成为style =“display：none;”然后在你的点击功能中你需要做的就是引用div并淡入它。

Answer 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元素更好，一直都在那里，并在需要时隐藏/显示。

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

3 个答案: