Onclick函数中的onclick

Question

我对显示模式有一个基本的问题。一切都很正常，但只是第二次点击。我确信，我在js代码中有一些错误。你能帮帮我吗？

HTML代码：

    <div class="flex flex-col lg:flex-row justify-center px-3 lg:px-0">
     <div class="pb-3 lg:pb-0 lg:p-5 cursor-pointer">
      <img onclick="showImage('planek1')" id="planek1" src="assets/imgs/planek1.jpg" alt="">
     </div>
     <div class="cursor-pointer lg:p-5">
      <img onclick="showImage('planek2')" id="planek2" src="assets/imgs/planek2.jpg" alt="">
     </div>
    </div>
    <div id="myModal" class="modal">
     <span class="close">&times;</span>
     <img class="modal-content" id="img01">
     <div id="caption"></div>
    </div>

Javascript代码：

    function showImage(id) {
     const modal = document.getElementById("myModal");
     const img = document.getElementById(id);
     const modalImg = document.getElementById("img01");
     img.onclick = function () {
      modal.style.display = "block";
      modalImg.src = this.src;
    };
    const span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
     modal.style.display = "none";
    };
   }

Answer 1

尝试删除onclick="showImage('planek2')"，为您的元素指定一个class="triggers-modal"，并编写以下JavaScript：

const modalImg = document.getElementById("img01");
const span = document.getElementsByClassName("close")[0];
span.onclick = function () {
    modal.style.display = "none";
};

Array.from(document.getElementsByClassName('triggers-modal')).forEach(element => {
        element.onclick = function () {
            modal.style.display = "block";
            modalImg.src = this.src;
        };
    });

这段代码为每个具有triggers-modal类名而不是onclick事件的元素定义了模态行为，这是不合适的。