javascript - 无法将多个图像添加到 CSS/JS 模态

Question

我正在尝试使一些图像在模态中单独弹出。我似乎只能弹出第一张图片，而不是第二张。我更愿意让图像以模式弹出，让您可以在它们之间切换，但我至少需要它们单独弹出。

HTML:

  <div class="container">
     <img id="myImg" src="images/300-200.png" alt="Filler Text" width="300" height="200">
     <img id="myImg2" src="images/300-200.png" alt="Filler Text" width="300" height="200">
     <div id="myModal" class="modal"> 
         <span class="closeimg" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
         <img class="modal-content" id="img01">
         <div id="caption"></div>
     </div>
  </div>

Javascript:

var modal = document.getElementById('myModal');
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;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

我知道有一个问题，因为我不能使用 .getElementByID 来获取多个 ID，而且我知道不能将两个元素标记为相同的 ID。话虽如此，我已经尝试过 .getElementByClassName 也没有用。

Answer 1

当尝试选择多个同类元素时，您应该使用类选择器，因为它能够在页面上多次出现，其中一个元素的 ID 是唯一的。

因此，首先我们将 class="myImg" 添加到两张图片中。

<img id="myImg" class="myImg" src="images/300-200.png" alt="Filler Text" width="300" height="200">
<img id="myImg2" class="myImg" src="images/300-200.png" alt="Filler Text" width="300" height="200">

然后我们将改变我们选择图像的方式:

// From this
var img = document.getElementById('myImg');
// To this
var imgs = document.getElementsByClassName('myImg');

由于 getElementsByClassName 返回类似数组的 HTMLCollection 类型，您需要遍历每个元素，然后向其添加事件监听器。

for (i = 0; i < imgs.length; i = i + 1) {
    var img = imgs[i];
    img.onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
    };
};

---

这是这个例子的一个工作版本:

var modal = document.getElementById('myModal');
var imgs = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

for (i = 0; i < imgs.length; i = i + 1) {
	var img = imgs[i];
  img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  };
};

var span = document.getElementsByClassName("closeimg")[0];
span.onclick = function() {
  modal.style.display = "none";
};

.modal {
  display: none;
  padding: 10px;
  background-color: blue;
}

<div class="container">

  <img id="myImg" class="myImg" src="http://placekitten.com/300/200" alt="Cat 1" width="300" height="200">
  <img id="myImg2" class="myImg" src="http://placekitten.com/300/300" alt="Cat 1" width="300" height="200">
  
  <div id="myModal" class="modal">
    <span class="closeimg">&times;</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
  </div>
  
</div>