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：

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

然后使用$('#imageresource').attr('src')设置预览。这就是为什么它总是显示模式中的第一张图像。您可以通过更改为来解决$('#imageresource').attr('src')它$(this).find('img').attr('src')。像这样的东西：

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

  // 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', $(this).find('img').attr('src'));

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

  });

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

    // close function

  });

});