自定义Javascript灯箱

我想为我的网站上的图像创建自己的灯箱。是的，我知道有lightbox2，它是免费的，但我喜欢这个挑战。我在灯箱上点击事件时遇到了问题，我试图让它删除灯箱，但点击事件似乎没有注册，并且我在Google Chrome开发工具中没有任何错误。这是我的代码：自定义Javascript灯箱

$(document).ready(function(){ 
    $(".lbox").click(function(){ 
     $("body").append("<DIV class='lbox_container'><DIV class='img_container'><IMG src='" + this.src + "'/></DIV></DIV>"); 
     $(".lbox_container").width($(document).width()).height($(document).height()); 
    }); 
    $(".lbox_container").click(function(){ 
     $(".lbox_container").remove(); 
    }); 
});

来源

2012-06-20 legobear154

请问您是否也可以将HTML throw引入[jsFiddle]（http://jsfiddle.net/）？ –

我认为你可以使用$（this）.remove（）而不是$（“。lbox_container”）。remove（），但是作为@TylerCrompton提及，jsfiddle会很好:) –

而不是

$(".lbox_container").click(function(){ 
    $(".lbox_container").remove(); 
});

使用此：

$("body").on('click','div.lbox_container', function(){ 
    $(".lbox_container").remove(); 
});

您需要这样做因为jQuery没有注册上。点击（）事件DOM中的新项目，只是在调用document.ready函数时存在于页面上的项目。

来源

2012-06-20 16:20:19 gcochard

非常感谢！我必须等待才能将答案设置为正确的答案......再次，谢谢！另一个问题，我不希望单击事件注册在img_container – legobear154

在添加到页面后，您需要为lbox_container设置点击状态 - 在第一次点击内移动绑定事件应该可行。

$(document).ready(function(){ 
    $(".lbox").click(function(){ 
     $("body").append("<DIV class='lbox_container'><DIV class='img_container'><IMG src='" + this.src + "'/></DIV></DIV>"); 
     $(".lbox_container").width($(document).width()).height($(document).height()); 

     $(".lbox_container").click(function(){ 
      $(".lbox_container").remove(); 
     }); 
    }); 
});

来源

2012-06-20 16:21:11 Drew

您的方法也起作用，但格雷格击败了你的答案:) – legobear154

自定义Javascript灯箱

回答

相关问题