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

<div class="container">
    <img class="img" src="images/300-200.png" alt="Filler Text" width="300" height="200">
    <img class="img" 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 id="modal-img">
        <div id="caption"></div>
    </div>
</div>

var img = document.querySelectorAll('img'),
    modal = document.getElementById('myModal'),
    modal_img = document.getElementById('modal-img'),
    captionText = document.getElementById('caption');

[].forEach.call(img, function(element){
    element.onclick = function(){
        modal.style.display = 'block';
        modal_img.src = this.getAttribute('src');
        caption.innerHTML = this.getAttribute('alt');
    }
});

工作小提琴：https://jsfiddle.net/kmdqjmua/

试试吧。

Answer 2

当尝试选择同一种类的多个元素时，您应该使用类选择器，因为它能够在页面上多次出现，其中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>

无法将多个图像添加到CSS / JS模式

2 个答案: