複数のdiv要素からモーダルを開きます

Question

他のすべての.open-img要素を使用してモーダルを開くにはどうすればよいですか？

最終的にイメージを内部でトリガーしたいと思っていますが、私はこれを使用しているはずですが、うまく動作するはずです。

Codepen：事前に

var modal = document.querySelector(".modal"); 
var modalBg = document.querySelector(".modal-bg"); 
var closeButton = document.querySelector(".close-button"); 
var openImg = document.querySelector(".open-img"); 

closeButton.addEventListener("click", function() { 
    modal.classList.toggle("closed"); 
    modalBg.classList.toggle("closed"); 
}); 

this.openImg.addEventListener("click", function() { 
    modal.classList.toggle("closed"); 
    modalBg.classList.toggle("closed"); 
}); 

おかげhttp://codepen.io/Middi/pen/EWxKLZ

Javascriptを。

Answer 1

あなたは各open-img要素にeventListenerを挿入する必要があります。

for (var i = 0; i < openImg.length; i++) { 
    openImg[i].addEventListener('click', function(){ 
    modal.classList.toggle("closed"); 
    modalBg.classList.toggle("closed"); 
    }) 
} 

または使用Array#fromES6機能：

Array.from(openImg).forEach(v => v.addEventListener('click', function(){ 
    modal.classList.toggle("closed"); 
    modalBg.classList.toggle("closed"); 
})); 

Codepen link

Answer 2

コードに基づいたソリューションです。それは完璧ではないのですが、それはあなたに良い出発点を与える必要があります：

// get all the matching elements 
var openImg = document.querySelectorAll(".open-img"); 

// iterate over them and add the handler for each of them 
openImg.forEach(function (image) { 
    image.addEventListener("click", function() { 
    // append the image to the modal 
    document.querySelector('.modal-main').appendChild(image.cloneNode(true)) 
    modal.classList.toggle("closed"); 
    modalBg.classList.toggle("closed"); 
    }); 
});