Así que estoy tratando de crear una cuadrícula de videos en la que la imagen de "marcador de posición" se reemplaza por un video al lado en DOM al hacer clic.
El código que he escrito funciona bien si hay una imagen/video, pero debería haber 6. He intentado trabajar a través de la matriz de marcadores de posición (con for (let i...)), pero luego la forma en que identifiqué el La constante de "video" con nextElementSibling parece dejar de funcionar. O tal vez algo más está mal, no estoy seguro.
No creo que forEach me ayude aquí, al menos en la medida en que entiendo cómo usarlo.
Un elemento en la cuadrícula se ve así:
<div class="videography__content--item"> <p class="video__title">Ноель Гоеман - Sanctus</p> <div class="video__placeholder--container"> <img src="img/videography/noel-goemanne-sanctus.jpg" alt="" class="placeholder"> <div class="play-button"></div> </div> <iframe class="video-insert" src="https://www.youtube-nocookie.com/embed/BkRqCCkUku0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>Y este es mi código JS:
(function () { const placeholder = document.querySelector(".video__placeholder--container"); const video = placeholder.nextElementSibling; placeholder.addEventListener("click", switchToVideo); function switchToVideo() { placeholder.style.display = "none"; video.style.display = "block"; } })();Estoy seguro de que hay alguna forma sencilla de hacerlo, pero soy nuevo en JS, ¡así que su ayuda será muy apreciada!
Problema resuelto con este código:
(function () { const arrPictures = document.querySelectorAll(".video__placeholder--container"); const arrVideos = document.querySelectorAll(".video-insert"); arrPictures.forEach(function (el, index) { el.addEventListener('click', () => switchToVideo(el, index)) }); function switchToVideo(el, index) { el.style.display = "none"; arrVideos[index].style.display = "block"; } })();