Tengo cuatro divs secundarios dentro del div contenedor, cada div secundario tiene un botón, una imagen y un texto dentro. Las imágenes deben estar blurry y el texto debe estar hidden de forma predeterminada.
Y cuando el usuario hace clic en el botón, el botón debe hidden , la imagen y el texto deben volverse clear y visible .
Estoy tratando de agregar o eliminar clases de CSS de elementos usando for loop, pero eso simplemente no funciona en absoluto...
let btns = document.querySelectorAll(".btn"); let images = document.querySelectorAll(".img"); let imgTexts = document.querySelectorAll(".img-text"); images.forEach((el) => el.classList.add("blur")); imgTexts.forEach((el) => el.classList.add("hidden")); for (let i = 0; i < btns; i++) { btns[i].addEventListener("click", function () { btns[i].classList.add("hidden"); }); } .blur { filter: blur(8px); -webkit-filter: blur(8px); } .hidden { display: none; } <div class="container"> <div class="card"> <button class="btn">Open the Gift</button> <img src="" alt="#" class="img"> <p class="img-text">CONGRATULATIONS🎉</p> </div> <div class="card"> <button class="btn">Open the Gift</button> <img src="" alt="#" class="img"> <p class="img-text">CONGRATULATIONS🎉</p> </div> <div class="card"> <button class="btn">Open the Gift</button> <img src="" alt="#" class="img"> <p class="img-text">CONGRATULATIONS🎉</p> </div> <div class="card"> <button class="btn">Open the Gift</button> <img src="" alt="#" class="img"> <p class="img-text">CONGRATULATIONS🎉</p> </div> </div>for (let i = 0; i < btns; i++) { btns[i].addEventListener("click", function () { btns[i].classList.add("hidden"); }); }Aquí, en las condiciones del bucle for, escriba "i < btns.length".
No hay un límite de que pueda crear solo una clase. Puede crear varias clases y simplemente agregar y eliminar la clase según sus necesidades. código de ejemplo HTML
<img class = "image imageHidden" src = alt = > <button class = "button buttonHidden">Click me</button>ahora creé dos clases al mismo tiempo, puedo usarlas según mis necesidades en javascript CSS
.image { visiblity: visible} .imageHidden { visibility: hidden} .button { visibility: visible} .buttonHidden { visibility: hidden}ahora los usé en CSS que puedo usar en javascript
document.querySelector(".button").addEventListener("clic",función () {
document.querySelector("img").classList.add("image"); document.querySelector("button").classList.add("buttonHidden");});este código ocultará el botón y mostrará la imagen, puede usar este método según sus necesidades.