Bilder mit verschiedenen modalen

Question

Ich bin frisch und neu in JavaScript und begierig, mehr darüber zu erfahren. Ich habe versucht, etwas mit Modals zu tun, und stieß auf eine Schwierigkeit, die ich nicht lösen kann. Ich möchte vier Bilder nebeneinander haben und wenn ich darauf klicke, wird ein Modal angezeigt. So zeigt Bild A modales A, Bild B modales B und so weiter. Ich kann nur scheinen, dass das erste Bild jetzt funktioniert und die anderen Bilder zeigen nicht einmal ein Modal. Kann mir bitte jemand dabei helfen? Vielen Dank im Voraus

<div class = "StyleTextBox"> 
    <h1>Present</h1> 
    <img id="myImg" src="C:/Users/s155310/Pictures/showcase pictures/guitar1.jpg" alt="guitar" width="200" height="auto"> 
    <img id="myImg" src="C:/Users/s155310/Pictures/showcase pictures/1.jpg" alt="thing" width="200" height="auto"> 

    //The Modal 
    <div id="myModal" class="modal"> 
     <span class="close">×</span> 
     <img class="modal-content" id="img01"> 
     <div id="caption"> </div> 
     <p> Some text </p> 
    </div> 

    <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; 
       modalImg.alt = this.alt; 
       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"; 
      } 
    </script> 

Answer 1

Es ist ungültig HTML mehr als ein Element mit der gleichen ID zu haben. Sie sollten Ihre Bildelemente ändern, um stattdessen eine Klasse zu verwenden. In JavaScript können Sie dann über document.getElementsByClassName('classNameHere') auf diese Klassen zugreifen und sie über eine Schleife durchlaufen, um das onclick-Attribut festzulegen. Zum Beispiel:

<div class = "StyleTextBox"> 
    <h1>Present</h1> 
    <img class="myImg" src="C:/Users/s155310/Pictures/showcase pictures/guitar1.jpg" alt="guitar" width="200" height="auto"> 
    <img class="myImg" src="C:/Users/s155310/Pictures/showcase pictures/1.jpg" alt="thing" width="200" height="auto"> 

//The Modal 
<div id="myModal" class="modal"> 
    <span class="close">×</span> 
    <img class="modal-content" id="img01"> 
    <div id="caption"> </div> 
    <p> Some text </p> 
</div> 

<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 images = document.getElementsByClassName('myImg'); 
     var modalImg = document.getElementById("img01"); 
     var captionText = document.getElementById("caption"); 
     function openModel(){ 
      modal.style.display = "block"; 
      modalImg.src = this.src; 
      modalImg.alt = this.alt; 
      captionText.innerHTML = this.alt; 
     } 
     for(var img = 0; img < images.length; img++) { 
     images[img].onclick = openModel; 
     } 

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

Answer 2

Das Problem ist nicht mit eindeutigen IDs. Verwenden Sie stattdessen Klassen