为什么我的 foreach addEventListener 没有添加事件？

Question

我正在做一个模态库，我认为我的所有东西都非常实用，但是当我点击图片时，我很确定 JS 不起作用。 我很确定它没有从 querySelectorAll 中获取图像，但是我可能是错的，我只是无法让它工作。

这是我的代码：

 var modal = document.querySelector(".modal"); var previews = document.querySelectorAll("#gallery img"); var original = document.querySelector(".fullImg"); var imgText = document.querySelector(".caption"); previews.forEach((preview) => { preview.addEventListener("click", () => { modal.classList.add("open"); }) }); modal.addEventListener("click", (e) => { if (e.target.classList.contains("modal")) { modal.classList.remove("open"); } });

 .modal { background: rgba(0,0,0,0.6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }.modal.open { opacity: 1; pointer-events: all; }.fullImg { position: absolute; height: 70%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); transition: all 0.25s ease-out; }.fullImg.open { transform: translate(-50%, -50%) scale(1); }.modal p { color: white; font-size: 2rem; position: absolute; bottom: 5%; left: 50%; transform: translate(-50%, -5%); }

 <div id="gallery"> <div class="imagemTexto"> <img class="GaleriaEffect imagem1" alt ="Comboio de madeira" src="img/brinquedos/comboio/Grupo de máscara 10.png"> <div class="texto"> <h2>Wood Truckain</h2> </br> <p>Ora camião, ora comboio.</p><p>Estas são as duas possibilidades de montagem deste brinquedo totalmente contruído em madeira de pinho,</p> Podendo alterar as peças para construir a forma de camião ou de comboio. a criatividade das crianças é estimulada;</p> </br> <h3>Diogo Rocha</h3> </div> </div> </br> <a class="AntN">&#10094;</a> <a class="ProxS">&#10095.</a> <img class="GaleriaEffect imagem2" alt ="Comboio de madeira" src="img/brinquedos/comboio/Grupo de máscara 11.png"> <img class="GaleriaEffect imagem3" alt ="Comboio de madeira" src="img/brinquedos/comboio/Grupo de máscara 12.png"> </div> <div class="modal"> <img src="" class="fullImg" /> <p class="caption"></p>` </div>

我真的很绝望，我尝试了很多不同的东西，但它不起作用

Answer 1

您没有在 modal 中设置图像的 src 。 您还必须设置它：

previews.forEach((preview) => {
    preview.addEventListener("click", () => {
        modal.classList.add("open");
        modal.querySelector('img').src = preview.src; //Update the src of the modal image with the src
    })
});