我目前正在開發一個簡單的圖像模式，它應該只顯示帶有關閉按鈕的圖像縮放。我有一個從 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    });});