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

Question

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

0

У меня проблема с кодом, который я запрограммировал. Идея заключается в создании пользовательского "лайтбокса" с использованием jQuery. Когда я нажимаю на миниатюру, код просматривает div, который имеет атрибуты "data-first-img-url", "data-second-img-url" и "data-third-img-url" - эти атрибуты содержат 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/

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

Sam Skirrow 26 сен. 2013, в 11:05

Источник

Теги:

jquery

css

append

this

attr

3 ответа

0

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

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

Chris 26 сен. 2013, в 06:55

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

lee_gladding 26 сен. 2013, в 06:26

Ещё вопросы

Anton · Accepted Answer · 2013-09-26T07-17-00.000Z

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

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

DEMO