我目前正在開(kāi)發(fā)一個(gè)簡(jiǎn)單的圖像模式，它應(yīng)該只顯示帶有關(guān)閉按鈕的圖像縮放。我有一個(gè)從 CMS 生成的標(biāo)記，其中可以將 a 標(biāo)記配置為具有額外的類“l(fā)ightbox”作為屬性，然后該屬性應(yīng)該觸發(fā) lightbox 腳本。然而，目前它似乎只適用于加載的第一張圖像。當(dāng)我單擊另一張圖像時(shí)，它顯示與第一張圖像相同的圖像源，我不知道如何修復(fù)它。是否需要先循環(huán)播放所有圖像？我的 CMS 為 DOM 中的圖像生成一個(gè)標(biāo)記，如下所示（圖像是占位符）：<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>然后，在我的默認(rèn)布局中，我添加燈箱模式的標(biāo)記：<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    });});