图像打开模态答案

【问题标题】：images to open modal图像打开模态
【发布时间】：2021-10-07 15:55:20
【问题描述】：

我在行和列中有一些图像，我想在单击它们时打开模式。到目前为止，只有第一张图片会打开模态框，我一生都无法弄清楚为什么它不适用于下面的所有其他代码：

HTML

    <div class="row">
      <div class="col-4">
        <img src="Assets/Images/homepage-section-image.png" class="modal" id="modal">
      </div>
      <div class="col-4">
        <img src="Assets/Images/homepage-section-image.png" class="modal" id="modal">
      </div>
      <div class="col-4">
        <img src="Assets/Images/homepage-section-image.png" class="modal" id="modal">
      </div>
      <div class="col-4">
        <img src="Assets/Images/homepage-section-image.png" class="modal" id="modal">
      </div>
    </div>

const modal_open = document.getElementById('modal');

modal_open.addEventListener('click', () => {
    document.getElementById("my_modal").style.display = "block";
});

'''

【问题讨论】：

只允许一个唯一的#id

标签： javascript html web modal-dialog

【解决方案1】：

这是因为 getElementById 仅返回一个具有给定 id 的元素，在您的情况下仅返回第一个元素。不妨试试以下方法。

const clicker = () => {

 //get htmlCollection of the img elements by class name 
const imgs = document.getElementsByClassName('modal');

//iterate over the images and add an event listener 
    for(let img of imgs){
        img.addEventListener('click', () => {
            alert("clicked!")
        });
    }
}

window.onload = () => {
    clicker()
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="row">
        <div class="col-4">
          <img src="{src}" class="modal" id="modal">
        </div>
        <div class="col-4">
          <img src="{src}" class="modal" id="modal">
        </div>
        <div class="col-4">
          <img src="{src}" class="modal" id="modal">
        </div>
        <div class="col-4">
          <img src="{src}" class="modal" id="modal">
        </div>
      </div>
</body>
</html>

ofc insted of alert('clicked') add

document.getElementById("my_modal").style.display = "block";

【讨论】：