javascript - 从多个 div 元素打开 Modal

Question

如何让所有其他 .open-img 元素打开我的模态框？

最终我想用内部图像触发模态，我确信我应该使用 .this，但无法让它工作。

代码笔:http://codepen.io/Middi/pen/EWxKLZ

Javascript

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

提前致谢。

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

或使用ES6功能Array#from:

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

<强> Codepen link