我一直在使用这段代码来让一个简单的灯箱在我的网站上工作。
我试着稍微修改一下：
a）灯箱淡入 - 完成
b) 脚本引入src属性而不是href- 完成
<img>b）我可以从正在单击（或我想是点击）的自定义“数据描述”属性中提取数据到<p>灯箱中的a。
问题
第二个，当第一次单击图像时，它工作正常。当单击任何其他按钮或再次单击它时，什么也没有发生-我不知道为什么，因为我似乎做得对？
此外，当使用 jQuery 1.9 时，live()显然已经贬值了——我之前使用的是 1.8.2，直到现在才注意到，我尝试on()过没有成功，作为一个 JS 初学者对如何修复它感到困惑，这个问题意味着灯箱不会关闭。
几乎可以工作但损坏的代码：http : //codepen.io/hwg/pen/ybEAw - 抱歉所有评论，但我发现这样更容易。
JS：
$(document).ready(function() { //Document Ready
$('.inner_img').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_src = $(this).attr("src");
// Get Description
var desc = $(this).attr("data-description");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
$('#content').html('<img src="' + image_src + '" />');
// Change Description in the P tag
$('.desc').html(' '+ desc +' ');
//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').fadeIn(); // Fades it in
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_src +'" />' +
'<p class="desc">'+ desc +'</p>' + // Adds Description from <img data-description="..">
'</div>' +
'</div>';
//insert lightbox HTML into page
$(lightbox).hide().appendTo("body").fadeIn();
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').on('click', function() { //must use live, as the lightbox element is inserted into the DOM
$("#lightbox").fadeOut(); // Fades it out
});
}); // End
谢谢你的帮助。
编辑：我已经被证明live/on问题很常见，我可以看到我哪里出错了。感谢您对此评论者的帮助。
但是，为什么我的代码不适用于第二个问题？