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();
    });
});

如何在用户的第二次点击中执行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;
});

<强>更新即可。要通过点击任意位置删除，您可以使用：

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

您几乎从不想在另一个处理程序中绑定一个事件处理程序。在您的代码中，每次单击图像时，都会在文档中添加另一个单击处理程序。您应该只在顶层绑定该处理程序一次。你不需要等到第一个处理程序运行后 - 如果gray DIV没有被添加到DOM中，那么就不会有任何要删除的东西。

$(":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()放入图像点击处理程序来阻止冒泡。

BTW，添加和删除这样的元素通常被认为是一种糟糕的方法。通常最好使用.hide()和.show()。

单击一下即可显示灯箱，但只有一次点击就会隐藏它（不是同一次点击）

2 个答案: