將多個圖像添加到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) { 
 
\t 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>

Answer 2

<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/

試試吧。