jQuery 选择器没有按预期工作(多个 :not selector not working?)

Question

我想在点击红色区域时关闭我的灯箱: http://naokonishimura.com/witoart/2d/

这个灯箱的 HTML 是这样的:

<div id="#lightbox" style="display:block;">
<div class="contents_lb">
    <div class="img_box" style="margin-top: 74.5px; width: 398px; height: 563px;">
        <a class="close" href="#" style="left: calc(50% + 159px);"></a>
        <a class="full" href="#" style="left: calc(50% + 159px); top: 523px;"></a>
        <div class="img_wrap" style="width: 398px; left: calc(50% - 199px);">
            <img class="lightbox" alt="Wito RenderA3 TEISHITSUblue 1000p wide" src="http://naokonishimura.com/witoart/wp-content/uploads/2015/03/Wito-RenderA3-TEISHITSUblue-1000p-wide.png" style="opacity: 100; height: 596px;">
            <div class="desc">
                <h2>
                    Wito RenderA3 TEISHITSUblue 1000p wide
                </h2>
                <p></p>
            </div>
        </div>
    </div>
</div>

但我对如何选择这个区域感到困惑。我写了这段 JQuery 代码来关闭灯箱

jQuery("#lightbox.close,#lightbox:not(.contents_lb):not(.img_box):not(.img_wrap):not(.img_wrap img):not(.img_wrap .desc)").click(function(){
                jQuery("#lightbox").remove();
            });

但是当点击#lightbox 上的任意位置时灯箱会关闭。除了图片上的#lightbox，我如何选择区域？提前致谢!

Answer 1

$("#lightbox:not(.myClass)") 接受所有带有 id 灯箱但没有类“myClass”的 div，这当然是您的灯箱。

尝试这样的事情:

jQuery("#lightbox").on("click", function(e) {
    if(e.target === this || $(e.target).is(".close")) {
        jQuery("#lightbox").remove();
    }
});

event.target 告诉您原始点击的来源。通过检查它不是来自较低级别的 div，您可以忽略不是来自红色区域的点击。