Fehler beim Hinzufügen mehrerer Bilder zu CSS/JS Modal

Question

Ich versuche, ein paar Bilder einzeln in einem Modal Pop-up zu machen. Ich kann nur das erste Bild erscheinen lassen, aber nicht das 2. Bild. Ich würde es vorziehen, die Bilder in einem Modal erscheinen zu lassen, mit dem Sie zwischen ihnen wechseln können, aber ich brauche sie zumindest einzeln.

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"; 
} 

Ich weiß, dass es ein Problem ist, da ich nicht .getElementByID verwenden kann mehr als eine ID zu holen und ich weiß, dass Zwei Elemente können nicht mit der gleichen ID gekennzeichnet werden. Nachdem das gesagt wurde, habe ich versucht .getElementByClassName, die auch nicht funktioniert.

Answer 1

Wenn Sie versuchen, mehrere Elemente desselben Typs auszuwählen, sollten Sie einen Klassenselektor verwenden, da er mehrmals auf einer Seite angezeigt werden kann, wobei eine ID für ein Element eindeutig ist.

Also, zuerst fügen wir class="myImg" zu jedem der zwei Bilder hinzu.

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

Dann ändern wir, wie wir die Bilder sind der Auswahl:

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

Seit getElementsByClassName kehrt die Array-artiges HTMLCollection Typ, müssen Sie durch die einzelnen Elemente zu durchlaufen, dann fügen Sie den Ereignis-Listener zu ihm.

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; 
    }; 
}; 

---

Hier ist eine funktionierende Version dieses Beispiels:

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'); 
    } 
}); 

Arbeits Fiddle: https://jsfiddle.net/kmdqjmua/

es versuchen.