Question

我正在创建一个包含多个灯箱的页面。灯箱的按钮是：

<button class="lightbox" data-lb="result-slide1">See More Results</button>

灯箱的触发方式如下：

var lightboxButtons = $('.lightbox');

lightboxButtons.on('click', function(e) {
    e.preventDefault();
    var button = $(this);
    var lightboxData = button.attr("data-lb");
    overlay.fadeIn();
    lightboxDisplay(lightboxData);
});

灯箱显示如下：

function lightboxDisplay(content) {
    var lightboxHTML = $('#' + content);
    lightboxContent.html(lightboxHTML);
    lightboxContainer.fadeIn();
};

所以基本上脚本会获得与id匹配按钮的data-lb属性的元素，并将该元素的html放入灯箱。

问题是如果发生以下步骤，这将停止工作：

触发灯箱按钮A
触发灯箱按钮B
再次触发灯箱按钮A

发生这种情况时，灯箱会显示，但其中没有任何内容。当我console.log(lightboxHTML)它显示一个空对象时，如果遵循这些步骤，那么问题就会以某种方式与该变量有关。谢谢你的期待。

编辑：这是单击关闭按钮时运行的功能：

function lightboxReset() {
    overlay.fadeOut();
    lightboxContainer.fadeOut();
};

EDIT2：以下是jQuery选择中可能进入灯箱的一些HTML：

<article class="slide-content results-lb-container" id="result-slide1">
    <img src="img/profile-placeholder.png" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at eleifend orci. Aliquam ac bibendum erat. Sed dapibus placerat feugiat. Nam et risus a purus scelerisque dignissim at ac purus. Donec dapibus nulla et lectus fringilla elementum. Vivamus orci ipsum, tincidunt id nisl posuere, rutrum imperdiet nibh. Fusce vitae dignissim libero. Nulla vel sapien urna. Fusce et mauris et neque imperdiet suscipit. In pretium elit felis, in consequat nulla ornare et. Etiam finibus nibh lorem, vitae placerat magna commodo ut.</p>
</article>

Answer 1

试试这个：

function lightboxDisplay(content) {
    var lightboxHTML = $('#' + content);
    lightboxContent.html(lightboxHTML.html());
    lightboxContainer.fadeIn();
};

jQuery动态选择在初始触发后停止工作

1 个答案: