通过jQuery从Div中获取URL实现Lightbox画廊的问题排查

我一眼就看到问题所在啦——你点击画廊单元格能弹出Lightbox，但图片死活加载不出来，核心原因是你获取图片链接的方式找错对象了！

问题根源 #

你的点击事件绑定在.image-item这个<div>上，然后用$(this).attr("href")去拿链接，但这个div本身根本没有href属性啊！真正的图片URL是藏在它内部的<a>标签里的，所以你拿到的image_href要么是undefined，要么是空值，自然没法加载图片。

修正方案 #

只需要改一行代码，先定位到当前点击的.image-item内部的<a>标签，再获取它的href值就行。另外，最好加个判断，避免点击空链接的时候弹出无效的Lightbox：

$(document).ready(function($) {
 $('.image-item').click(function(e) {
 e.preventDefault();
 // 找到当前div里的a标签，再拿它的href
 var image_href = $(this).find('a').attr("href");
 // 只有当链接不为空时才显示Lightbox
 if(image_href && image_href !== ""){
    $("#lightbox").css("display", "block");
    $('#content').html('<img src="' + image_href + '" />');
 }
 });
 $('body').on('click', '#lightbox', function() {
 $("#lightbox").css("display", "none");
 });
});

额外优化小建议 #

1. 修复半透明遮挡问题：你的#lightbox设置了opacity:0.5，这会让里面的图片也变成半透明。建议改用rgba设置背景色，这样只会让背景半透明，不影响内部图片：

#lightbox {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 /* 用rgba实现半透明背景，不影响内部元素 */
 background-color: rgba(0,0,0,0.5);
 text-align: center;
 z-index: 2;
 display: none;
}

2. 拦截a标签默认行为：虽然你在div的点击事件里加了e.preventDefault()，但最好给内部的<a>也绑定阻止跳转的事件，避免意外跳转：

$('.image-item a').click(function(e){
    e.preventDefault();
});

3. 空链接提示：对于还没填写URL的单元格，点击时可以加个小提示，比如弹出“图片尚未上传”，提升用户体验。

这样修改后，点击有有效链接的单元格，Lightbox就能正确加载出图片啦！

内容的提问来源于stack exchange，提问作者fellinlovewithaman