Один щелчок показывает лайтбокс, но только второй щелчок скрывает его (не тот же первый щелчок)

Question

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

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

$('img').on('click', function(){ 
    $('body').append('<div id="gray"><div id="gray_content"></div></div>'); 
    var image = $(this).clone(); 
    $('#gray_content').html(image); 
    $(document).click(function() { 
     $('#gray').remove(); 
    }); 
}); 

Как выполнить удалить() часть на второй щелчок от пользователя (не тот же первый клик)?

Answer 1

Вы можете использовать простой флаг для этого:

Fiddle.

var isFirst = true; 

$('img').on('click', function() 
{ 
    if (isFirst) 
    { 
     $('body').append('<div id="gray"><div id="gray_content"></div></div>'); 
     var image = $(this).clone(); 
     $('#gray_content').html(image); 
    } 
    else 
    { 
     $('#gray').remove(); 
    } 
    isFirst = !isFirst; 
}); 

Update. Чтобы удалить, нажав в любом месте, вы можете использовать:

Updated fiddle.

var isFirst = true; 

$('img').on('click', function() 
{ 
    if (isFirst) 
    { 
     $('body').append('<div id="gray"><div id="gray_content"></div></div>'); 
     var image = $(this).clone(); 
     $('#gray_content').html(image); 
     isFirst = false; 
     return false; 
    } 
}); 

$(document).on('click', function() 
{ 
    if (!isFirst) 
    { 
     $('#gray').remove(); 
     isFirst = true; 
    } 
}); 

Answer 2

Вы почти никогда не хотите связывать один обработчик событий внутри другого обработчика. В вашем коде каждый раз, когда вы нажимаете на изображение, вы добавляете в документ ДРУГОЙ обработчик кликов. Вы должны просто привязать этот обработчик один раз на верхнем уровне. Вам не нужно ждать, пока после запуска первого обработчика - если в DOM не добавлен gray DIV, просто не удастся удалить что-либо.

$(":not(img)").click(function() { 
    $("#gray").remove(); 
}); 
$("img").click(function() { 
    if ($("#gray").length == 0) { // If it's not already showing 
     $('body').append('<div id="gray"><div id="gray_content"></div></div>'); 
    } 
}); 

Причина щелчок по изображению разрушает gray DIV из-за восходящую цепочку события - после того, как обработчик щелчка на прогонах изображения, событие пузыри к документу и что обработчик события также работает. Вы можете предотвратить пузыри, положив event.stopPropagation() в обработчик изображения.

Кстати, добавление и удаление таких элементов, как правило, считается плохим подходом. Обычно предпочтительнее использовать .hide() и .show().