jQuery 代码在激活两次时加倍 Action

Question

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

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