Creé una galería simple con imágenes redimensionadas al hacer clic y agregué "x" a los contenedores de imágenes que eliminan la clase (.bigger). Sin embargo, estoy tratando de descubrir cómo agregar otra clase (.invisible) que elimine "x" cuando la imagen seleccionada no tenga clase (.bigger). ¿Puedes ayudar a un codificador principiante?
¿Cómo hacer una condición: si una imagen NO tiene clase .más grande, agregar clase .invisible (a la cruz)? Estoy muy agradecido por cualquier ayuda.
const imgList = document.querySelectorAll("img"); const crosses = document.querySelectorAll(".imgContainer span"); for (let i = 0; i < imgList.length; i++) { imgList[i].addEventListener("click", function() { imgList.forEach((el) => el.classList.remove("bigger")); imgList[i].classList.add("bigger"); }); } for (let x = 0; x < crosses.length; x++) { crosses[x].addEventListener("click", function() { imgList.forEach((el) => el.classList.remove("bigger")); crosses[x].classList.remove("invisible"); }); } if (imgList[i].classList.contains("")) { crosses[x].classList.add("invisible"); } img { width: 150px; height: 120px; object-fit: cover; margin: 0 1rem; opacity: 0.5; transition: all 0.2s; } img:hover { opacity: 1; } .imgContainer { position: relative; } .imgContainer span { position: absolute; top: -5px; right: 0; cursor: pointer; display: block; width: 15px; height: 15px; background-color: transparent; text-align: center; line-height: 15px; font-size: 30px; } .bigger { width: 500px; height: auto; opacity: 1; } .invisible { display: none; } <div class="imgContainer"> <span>×</span> <img src="img1.jpg" alt="Tokyo1" /> </div> <div class="imgContainer"> <span>×</span> <img src="img2.jpg" alt="Tokyo2" /> </div> <div class="imgContainer"> <span>×</span> <img src="img3.jpg" alt="Tokyo3" /> </div>Si itera sobre el .imgContainer , puede acceder más fácilmente al img y al span correspondientes.
Además, puede cambiar la clase CSS invisible a .imgContainer span.invisible más específico porque .imgContainer span {display: block} lo sobrescribiría.
const imgList = document.querySelectorAll(".imgContainer img"); const crossList = document.querySelectorAll(".imgContainer span"); document.querySelectorAll(".imgContainer").forEach((container) => { const img = container.querySelector("img"); const cross = container.querySelector("span"); img.addEventListener("click", function () { // Reset the classes of all images and spans. imgList.forEach((el) => el.classList.remove("bigger")); crossList.forEach((el) => el.classList.add("invisible")); // make the image bigger and show the cross. img.classList.add("bigger"); cross.classList.remove("invisible"); }); cross.addEventListener("click", function () { img.classList.remove("bigger"); cross.classList.add("invisible"); }); }); img { width: 150px; height: 120px; object-fit: cover; margin: 0 1rem; opacity: 0.5; transition: all 0.2s; } img:hover { opacity: 1; } .imgContainer { position: relative; } .imgContainer span { position: absolute; top: -5px; right: 0; cursor: pointer; display: block; width: 15px; height: 15px; background-color: transparent; text-align: center; line-height: 15px; font-size: 30px; } .imgContainer span.invisible { display: none; } .bigger { width: 500px; height: auto; opacity: 1; } <div class="imgContainer"> <span class="invisible">×</span> <img src="https://via.placeholder.com/300" alt="Tokyo1" /> </div> <div class="imgContainer"> <span class="invisible">×</span> <img src="https://via.placeholder.com/300" alt="Tokyo2" /> </div> <div class="imgContainer"> <span class="invisible">×</span> <img src="https://via.placeholder.com/300" alt="Tokyo3" /> </div> const imgList = document.querySelectorAll("img"); const crosses = document.querySelectorAll(".imgContainer span"); for (let i = 0; i < imgList.length; i++) { imgList[i].addEventListener("click", function() { imgList.forEach((el) => el.classList.remove("bigger")); this.classList.add("bigger"); changeAction(); }); } for (let x = 0; x < crosses.length; x++) { crosses[x].addEventListener("click", function() { imgList.forEach((el) => el.classList.remove("bigger")); this.classList.remove("invisible"); }); } function changeAction() { for (let i = 0; i < imgList.length; i++) { if (imgList[i].classList.contains("")) { crosses[x].classList.add("invisible"); } } } img { width: 150px; height: 120px; object-fit: cover; margin: 0 1rem; opacity: 0.5; transition: all 0.2s; } img:hover { opacity: 1; } .imgContainer { position: relative; } .imgContainer span { position: absolute; top: -5px; right: 0; cursor: pointer; display: block; width: 15px; height: 15px; background-color: transparent; text-align: center; line-height: 15px; font-size: 30px; } .bigger { width: 500px; height: auto; opacity: 1; } .invisible { display: none; } <div class="imgContainer"> <span>×</span> <img src="img1.jpg" alt="Tokyo1" /> </div> <div class="imgContainer"> <span>×</span> <img src="img2.jpg" alt="Tokyo2" /> </div> <div class="imgContainer"> <span>×</span> <img src="img3.jpg" alt="Tokyo3" /> </div>