我怎样才能让 3 个不同图像的模态工作，它们都有不同的 id？

Question

当前发生的事情： 我有 3 个图片标签：

<img id="myImg" th:src="@{/img/image1.png}" alt="html/css">
<img id="myImg1" th:src="@{/img/image2.png}" alt="html/css">
<img id="myImg2" th:src="@{/img/image3.png}" alt="html/css">

每个图像标签都有不同的 ID。当第一张图片被点击时，它会打开一个模式，它会放大图片并提供一些额外的样式，比如使背景变暗等。

这是脚本标签：

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");


img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

既然你看到了发生了什么，问题是： 我怎样才能使用相同的脚本代码...

img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

...在多张图片上，无需为每个不同的 ID 重复上面的代码？我想在所有提到的图像上重新使用上面的代码，有什么好的方法可以解决这个问题？

Answer 1

很简单，你可以这样做

    <div class="image-wrapper">
         <img id="myImg" th:src="@{/img/image1.png}" alt="html/css">
         <img id="myImg1" th:src="@{/img/image2.png}" alt="html/css">
         <img id="myImg2" th:src="@{/img/image3.png}" alt="html/css">
    </div>
   


    <script>
        // select image wrapper
        var imageCont = document.querySelector(".image-wrapper");
        
        imageCont.addEventListener('click',(e)=>{
            

            const target = e.target;

            modal.style.display = "block";
            modalImg.src = target.src;
            captionText.innerHTML = target.alt;


        })

    </script>

// Second Way 


  

     // Change Id to Class 

     <img class="myImg" th:src="@{/img/image1.png}" alt="html/css">
     <img class="myImg" th:src="@{/img/image2.png}" alt="html/css">
     <img class="myImg" th:src="@{/img/image3.png}" alt="html/css">
   


<script>
    // select all image element 
    var image = document.querySelectorAll(".myImg");
    
    image.forEach( Element =>{
        
        Element.addEventListener('click',()=>{
        
                modal.style.display = "block";
                modalImg.src = Element.src;
                captionText.innerHTML = Element.alt;
        })


    })

   
</script>

希望对你有用。

Answer 2

var imgs = document.querySelectorAll('img');
imgs.forEach((d) => {
  d.onclick = (e)=>{
    expand(d)
  };
})

function expand(img) {
  imgs.forEach((d) => {
    d.style.display = 'none;' 
  })
  var modal = document.querySelector('#modal');
  modal.src = img.src;
  document.getElementById('caption').style.display = "block";
  document.getElementById('caption').innerHTML = img.alt;
  document.getElementById('close').style.display = "block";
  modal.style.display = 'block';

  
}
document.getElementById('close').onclick= close;
function close(){
imgs.forEach((d) => {
    d.style.display = 'block;' 
  })
  var modal = document.querySelector('#modal');
  var closeButton  = document.getElementById('close');
  modal.style.display="none";
  document.getElementById('caption').style.display = "none";
  closeButton.style.display = 'none';
  

}

#modal {
  display: none;
  width: 100%;
  height: 100vh;
  z-index: 888;
  position: absolute;
  top: 0;
  left: 0;
}
#close{
  z-index: 999;
  display:none;
 }

<img id="myImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzasralkpQ6P2ixUwfT8xy0V5MlHcwZXRNJkxbOG_J0R1gnpk:https://upload.wikimedia.org/wikipedia/commons/7/73/001_Tacos_de_carnitas%252C_carne_asada_y_al_pastor.jpg&usqp=CAU" alt="taco">
<img id="myImg1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNJM7gKxxbUCGbEBCCDtA9FuamJTy3d96HgZKwjQTZJcnY1YE:https://images-gmi-pmc.edge-generalmills.com/e59f255c-7498-4b84-9c9d-e578bf5d88fc.jpg&usqp=CAU" alt="another taco">
<img id="myImg2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLBqdNKFkR_0Ue5mnbNxUmtLFVZxPWnk6QVCPJHx4Ls5XVK2X7:https://www.carveyourcraving.com/wp-content/uploads/2020/09/Easy-vegetarian-tacos.jpg&usqp=CAU" alt="taco taco">
<img id='modal'>
<br><br><br><br><br><br><br>
<div id = 'caption'></div>
<div id = 'close'>Close</div>

使用document.querySelectorAll() 获取图像列表，然后遍历图像，为每个图像分配一个函数。（为了演示，我在 IMG 标签中添加了图像。

我怎样才能让 3 个不同图像的模态工作，它们都有不同的 id？

How can I have the modal work for 3 different images, that all have different id's?

html

javascript

css

bootstrap-modal