Код jQuery удваивает действие при двойной активации

У меня проблема с некоторым кодом, который я запрограммировал. Идея состоит в том, чтобы создать собственный «лайтбокс» с помощью jQuery. Когда я нажимаю на миниатюру, код просматривает div, который имеет атрибуты «data-first-img-url», «data-second-img-url» и «data-therth-img-url» — эти атрибуты содержат URL-адреса, которые становятся фоновым изображением всплывающей галереи.

ОДНАКО, проблема, с которой я сталкиваюсь, заключается в том, что когда я закрываю всплывающее окно и нажимаю, чтобы открыть его снова, изображения появляются дважды.

Вот мой 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 this append attr
person Sam Skirrow    schedule 26.09.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Попробуйте это, вы добавляете новое изображение каждый раз, когда открываете его, удалите их, прежде чем добавлять новое.

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

ДЕМО

person Anton    schedule 26.09.2013

arrow_upward
0
arrow_downward

Ваше исчезновение, но каждый раз, когда вы добавляете html обратно на страницу.

Создайте div на странице и сделайте его style="display:none;" то в вашем клике все, что вам нужно сделать, это сослаться на div и постепенно его добавить.

person Chris    schedule 26.09.2013

arrow_upward
0
arrow_downward

Это потому, что вы дважды добавляете 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, было бы иметь их там все время и скрывать/показывать, когда это необходимо.

person lee_gladding    schedule 26.09.2013