最初の画像のみを表示するモーダル（コードをIDからクラスに変更する方法は？）

Question

各記事に複数の画像が表示されるジャーナルがあります。彼らは自己永続化され、作られています。私は彼らのIDは何か分からない。私は最近、モーダル画像を表示するコードを追加しましたが、コードにはIDが1つしかないため、最初の画像のみがモーダル画像として表示されています。残りはすべて表示されません。

JavaScriptコードとhtmlをご覧ください。私にそれをどのように変更するかを教えてください。 おかげ

JSコード

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

HTMLコード

<div class="imagewrap"> 

{** check if link is from galley attachments*} 
       {if strpos($secCont->getLink(), "/") == false} 
        {foreach from=$imageUrlArray key=fileName item=urlLink} 
         {if $fileName == $secCont->getLink()} 

          <img src="{$urlLink}" id="myImg" alt="{$secCont->getLabel()}" width="300" height="200"> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- The Close Button --> 
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> 

    <!-- Modal Content (The Image) --> 
    <img class="modal-content" id="img01"> 

    <!-- Modal Caption (Image Text) --> 
    <div id="caption"></div> 
</div> 



<a style="font:4;"><a class="imagewrap" href="{$urlLink}"><strong>[Download figure]</strong></a> 
{/if} 
        {/foreach} 
       {else} 
        <img src="{$secCont->getLink()}"> 

<a style="font:4;"><a class="imagewrap" href="{$secCont->getLink()}"><strong>[Download figure]</strong></a> 


       {/if} 

    </div> 

Answer 1

まあ、我々は、IDSは必要ありません。異なる画像を取得するにはdocument.querySelectorAllを使用できます。下のコードを見てください。

// Get the modal 
 
// and all the variable we need. 
 
var modal = document.getElementById('myModal'); 
 
var modalImg = document.getElementById("img01"); 
 
var captionText = document.getElementById("caption"); 
 

 
showImageInModal = function(e) { 
 
    modal.style.display = "block"; 
 
    modalImg.src = this.src; 
 
    captionText.innerHTML = this.alt; 
 
} 
 

 
// get all the images using querySelector: we want all the direct descendants of div with class imagewrap. 
 
//Loop them using Array's forEach. Since querySelector returns a nodelist which is array like, we can loop it with forEach. Use call to pass the nodelist as a reference. 
 
var images = document.querySelectorAll("div.imagewrap > img"); 
 
Array.prototype.forEach.call(images, function(element){ 
 
    element.addEventListener("click", showImageInModal, true); //attach the onclick handler to the image using the correct approach with addEventListener. 
 
}); 
 

 
// 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.addEventListener("click", function(e) { 
 
    modal.style.display = "none"; 
 
}, true);

.modal{ 
 
position: absolute; 
 
left: 10px; 
 
top: 10px; 
 
border: 1px solid black; 
 
width: 300px; 
 
display: none; 
 
background-color: white; 
 
}

<div class="imagewrap"> 
 
    <!-- added # to the getLabel so you can see the difference, please remove when copied --> 
 
    <img src="{$urlLink}" alt="{$secCont->getLabel(1)}" width="300" height="200"> 
 
    <img src="{$urlLink}" alt="{$secCont->getLabel(2)}" width="300" height="200"> 
 
    <img src="{$urlLink}" alt="{$secCont->getLabel(3)}" width="300" height="200"> 
 
    <img src="{$urlLink}" alt="{$secCont->getLabel(4)}" width="300" height="200"> 
 
    <img src="{$urlLink}" alt="{$secCont->getLabel(5)}" width="300" height="200"> 
 
    <img src="{$urlLink}" alt="{$secCont->getLabel(6)}" width="300" height="200"> 
 

 
    <!-- The Modal --> 
 
    <div id="myModal" class="modal"> 
 

 
    <!-- The Close Button --> 
 
    <span class="close" >&times;</span> 
 

 
    <!-- Modal Content (The Image) --> 
 
    <img class="modal-content" id="img01"> 
 

 
    <!-- Modal Caption (Image Text) --> 
 
    <div id="caption"></div> 
 
    </div> 
 

 
</div>