Javscript：对于每个图像，单击显示带有图像缩放的模式

Question

我目前正在开发一个简单的图像模式，它应该只显示带有关闭按钮的图像缩放。我有一个从 CMS 生成的标记，其中可以将 a 标记配置为具有额外的类“lightbox”作为属性，然后该属性应该触发 lightbox 脚本。

然而，目前它似乎只适用于加载的第一张图像。当我单击另一张图像时，它显示与第一张图像相同的图像源，我不知道如何修复它。是否需要先循环播放所有图像？

我的 CMS 为 DOM 中的图像生成一个标记，如下所示（图像是占位符）：

<a href="image1.png" class="lightbox">

  <img class="image-embed-item" src="image" >

</a>

<a href="image1.png" class="lightbox">

   <img class="image-embed-item" src="image" >

</a>

<a href="image1.png" class="lightbox">

    <img class="image-embed-item" src="image" >

</a>

然后，在我的默认布局中，我添加灯箱模式的标记：

<div id="imagemodal" class="modal">

    <!-- Modal content -->

    <div class="modal-content">

        <div class="close">&times;</div>

        <img src="" id="imagepreview" style="width: 100%;" >

    </div>

</div>

这是 JavaScript 代码：

window.addEventListener('DOMContentLoaded', function () {

    // add imageresource id to loaded image

    $(".image-embed-item").attr("id", "imageresource");

    // add data-toggle class to all lightbox elements

    $(".lightbox").attr("data-toggle", "lightbox");

    // click event for data toggle

    $(document).on('click', '[data-toggle="lightbox"]', function (event) {

        event.preventDefault();

    // use image source from clicked image

        $('#imagepreview').attr('src', $('#imageresource').attr('src'));

        $('.modal').css('display', 'block');

    });

    $(document).on('click', $('.closeModal'), function (event) {

        // close function

    });

});

Answer 1

您对以下所有位置使用相同的 id .image-embed-item：&nbsp;$(".image-embed-item").attr("id", "imageresource");&nbsp;然后使用$('#imageresource').attr('src')设置预览。这就是为什么它总是显示模式中的第一张图像。您可以通过更改为来解决$('#imageresource').attr('src')它$(this).find('img').attr('src')。像这样的东西：window.addEventListener('DOMContentLoaded', function () {&nbsp; // add data-toggle class to all lightbox elements&nbsp; $(".lightbox").attr("data-toggle", "lightbox");&nbsp; // click event for data toggle&nbsp; $(document).on('click', '[data-toggle="lightbox"]', function (event) {&nbsp; &nbsp; event.preventDefault();&nbsp; // use image source from clicked image&nbsp; &nbsp; $('#imagepreview').attr('src', $(this).find('img').attr('src'));&nbsp; &nbsp; $('.modal').css('display', 'block');&nbsp; });&nbsp; $(document).on('click', $('.closeModal'), function (event) {&nbsp; &nbsp; // close function&nbsp; });});