Question

我正在尝试编写一个灯箱脚本，可以在点击时打开图片。正如你在小提琴中看到的，那部分是有效的。但是通过单击灯箱关闭图像以执行函数.remove（）并没有完全解决问题。那是为什么？

$(".discuss-entry img").each(function() {
    var image = $(this);
    var src = image.attr("src");
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var imageWidth = image.outerWidth();
    var imageHeight = image.outerHeight();

    var left = ((windowWidth-imageWidth)/2)
    var top = ((windowHeight-imageHeight)/2)

    if(image.closest("a")[0]===undefined) {
        image.on("click",function(){
            $("<div class='lightbox'><img src='"+src+"' style='top: "+top+"px; left: "+left+"px' /></div>").appendTo("body");
        });
        $(".lightbox").on("click", "img", function() {
            $(this).remove();
        });
    }
});

Answer 1

您在创建.lightbox之前选择$(".discuss-entry img").each(function() { var image = $(this); var src = image.attr("src"); var windowWidth = $(window).width(); var windowHeight = $(window).height(); var imageWidth = image.outerWidth(); var imageHeight = image.outerHeight(); var left = ((windowWidth-imageWidth)/2) var top = ((windowHeight-imageHeight)/2) if(image.closest("a")[0]===undefined) { image.on("click",function(){ $("<div class='lightbox'><img src='"+src+"' style='top: "+top+"px; left: "+left+"px' /></div>").appendTo("body"); $(".lightbox").on("click", function() { $(this).remove(); }); }); } });，您应该在创建事件后选择并添加该事件，例如this

的JavaScript

.on("click","img"..)

此外，我更改了.on("click"..) {{1}}，以便删除完整的灯箱而不仅仅是图片，但随时可以更改它。

希望它有所帮助！

Answer 2

尝试将该事件放入灯箱div上的onclick：

if(image.closest("a")[0]===undefined) {
    image.on("click",function(){
        $("<div class='lightbox' onclick='$(this).remove()' ><img src='"+src+"' style='top: "+top+"px; left: "+left+"px' /></div>").appendTo("body");
    });
}

http://jsfiddle.net/L11h2b50/10/

.remove（）没有达到预期的效果

2 个答案:

的JavaScript