时间戳

首页 > 解决方案 > onclick 函数中的 onclick

javascript - onclick 函数中的 onclick

问题描述

我有一个显示模态的基本问题。一切正常，但仅适用于第二次点击。我敢肯定，我在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";
    };
   }

标签： javascripthtml

解决方案

尝试删除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不合适的事件。

推荐阅读