jQuery实现Lightbox时appendTo添加箭头元素页面不显示问题求助

嘿，我帮你排查出箭头不显示的核心问题了，咱们一步步来解决：

你把箭头<div>元素添加到了<img>标签里面，但<img>是HTML的空元素（Void Element），它天生不能包含任何子元素。浏览器会直接忽略<img>内部的所有节点，所以哪怕开发者工具能看到这些箭头元素，页面也不会渲染它们。

接下来咱们一步步修复代码：

1. 修正元素创建的语法错误 #

你创建箭头div时的属性写法有问题，多余的等号会导致id属性无法正确识别：

// 错误写法
larrow = $('<div = id = "larrow"> < </div>');

改成正确的属性定义，同时用HTML实体代替<和>避免解析问题：

// 正确写法
larrow = $('<div id="larrow">&lt;</div>'); // LEFT ARROW
rarrow = $('<div id="rarrow">&gt;</div>'); // RIGHT ARROW

2. 调整箭头的挂载位置 #

不要把箭头加到<img>里，直接挂载到overlay遮罩层中，这样才能被正常渲染：

image.appendTo(overlay);
// 把箭头添加到overlay，而非image
larrow.appendTo(overlay);
rarrow.appendTo(overlay);

3. 给箭头添加定位样式 #

现在箭头能显示了，但需要调整位置让它们出现在图片两侧，修改CSS：

#larrow, #rarrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    font-size: 50px; /* 原来的500px太大，先调小测试 */
    color: red;
    z-index: 2000;
    cursor: pointer; /* 提示可点击 */
    user-select: none; /* 禁止选中箭头文字 */
}
#larrow {
    left: 20px; /* 左箭头贴左侧 */
}
#rarrow {
    right: 20px; /* 右箭头贴右侧 */
}

4. 修复重复绑定事件的隐患 #

你现在每次点击画廊的图片链接，都会给document绑定一次关闭事件，多次点击后会触发多次隐藏操作。建议把关闭事件移到外面，只绑定一次：

// 把关闭事件移到点击事件外部，避免重复绑定
overlay.on("click", function(){
    $(this).hide();
    $(this).empty(); // 清空遮罩层内容，避免残留
})

完整修正后的代码示例 #

JavaScript 部分 #

// Gallery Lightbox made with Jquery
$(function() { // 确保DOM加载完成后执行
    let gallery = $('#gallery'),
        overlay = $('<div id="overlay"></div>').appendTo('body').hide();

    // Opens the lightbox with chosen image
    gallery.find('a').on("click", function(event){
        event.preventDefault();
        let href = $(this).attr('href'),
            image = $('<img>', {src: href}),
            larrow = $('<div id="larrow">&lt;</div>'),
            rarrow = $('<div id="rarrow">&gt;</div>');

        overlay.empty(); // 先清空之前的内容
        image.appendTo(overlay);
        larrow.appendTo(overlay);
        rarrow.appendTo(overlay);
        overlay.show();
    })

    // Closes the Lightbox by clicking on the overlay
    overlay.on("click", function(){
        $(this).hide();
    })
})

CSS 部分 #

.gallery {
    display: flex; /* 原display:none会让画廊隐藏，改成flex正常显示 */
    opacity: 1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1004px;
    margin: 0 auto;
}
.gallery img {
    position: relative;
    top: 100px;
    height: 200px;
    width: 300px;
    margin: 0 1em;
}
#overlay {
    background: rgba(0, 0, 0, .7);
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 10;
}
#overlay img {
    margin-top: 5%;
    border: solid 5px white;
    border-radius: 5px;
    max-width: 80%; /* 限制图片最大宽度，避免溢出 */
    max-height: 80%;
}
#larrow, #rarrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    color: red;
    z-index: 2000;
    cursor: pointer;
    user-select: none;
}
#larrow {
    left: 20px;
}
#rarrow {
    right: 20px;
}

这样调整后，箭头就能正常显示在Lightbox的两侧，同时也修复了其他潜在的小问题。

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