jQuery代碼在激活兩次時加倍行動

我遇到了一些我編程的代碼問題。這個想法是使用jQuery創建一個自定義的「燈箱」。當我點擊縮略圖時，代碼通過具有屬性「data-first-img-url」，「data-second-img-url」和「data-third-img-url」的div查看 - 這些屬性包含成爲彈出式畫廊背景圖片的網址。jQuery代碼在激活兩次時加倍行動

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/

你可以看到，當您在圖像上單擊一次它工作正常，但隨後關閉彈出並重新開放，它在那裏兩次。

來源

2013-09-26 Sam Skirrow

試試這個，要添加您打開一個新的形象，每次你添加一個新的

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

DEMO

來源

2013-09-26 08:27:43 Anton

完美，謝謝 –

您的衰落之前將其刪除，但每次你追加的HTML回到頁面。

在頁面上創建div並使其爲style =「display：none;」然後在你的點擊funcs中，你需要做的就是引用div並淡入它。

來源

2013-09-26 08:30:16

這是因爲你正在追加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-26 08:30:34

jQuery代碼在激活兩次時加倍行動

回答

相關問題