CSS/JSモーダルに複数の画像を追加する際に問題が発生する

Question

私はいくつかの画像をモーダルで個別にポップアップ表示させようとしています。私は、最初の画像をポップアップするように見えるだけで、2番目の画像は表示されないようです。私はあなたがそれらの間で切り替えることができるモーダルでポップアップ画像を作ることを好むだろうが、私は少なくともそれらを個別にポップアップする必要があります。

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

私は私が複数のIDをピックアップして.getElementByIDを使用することはできませんので、問題があると知って、私がいることを知っています2つの要素に同じIDのラベルを付けることはできません。それが言われて、私はどちらもうまくいかなかった.getElementByClassNameを試しました。

Answer 1

同じ種類の複数の要素を選択しようとすると、クラスセレクタを使用する必要があります。これは、idが1つの要素に固有のページに複数回表示されるためです。

まず、2つの画像のそれぞれに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/

はそれを試してみてください。