Tengo cuatro div con imagen y quiero agregar una clase .open cuando se hace clic en el panel y eliminar esta clase del último div cuando se hace clic en otro div.
<div class="panel panel1"> image.. </div> <div class="panel panel2"> image.. </div> <div class="panel panel3"> image.. </div> <div class="panel panel4"> image.. </div> <div class="panel panel5"> image.. </div>Cuando agregamos la lista de clases abiertas, este contenedor de imágenes crece 5 veces, por lo tanto, quiero eliminar esta clase cuando haga clic en otro contenedor de imágenes:
.panel.open { font-size: 40px; flex: 5; } const panel = document.querySelectorAll(".panel"); function toggleOpen() { this.classList.toggle("open"); } function toggelActive() { this.classList.add("open-active"); } panel.forEach((panel) => panel.addEventListener("click", toggleOpen)); panel.forEach((panel) => panel.addEventListener("transitionend", toggelActive));cuando usa querySelectorAll, el resultado que obtendrá será una lista de nodos, puede acceder a los elementos a través del índice y cambiarlos.
const divs = document.querySelectorAll("div"); console.log(divs[divs.length - 1]); divs[divs.length - 1].classList.add("active"); .active { font-size: 30px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <script src="./script.js"></script> </body> </html>Si proporciona una descripción más detallada de la lógica que desea implementar, tal vez pueda ayudarlo mejor.
Recordando que para acceder al primer elemento el índice es 0
Puede usar un bucle for para recorrer todos los paneles, eliminar la clase 'abierta' y luego agregarla al panel en el que se hizo clic:
const panel = document.querySelectorAll(".panel"); function toggleOpen() { // For loop for (let i = 0; i < panel.length; i++) { panel[i].classList.remove("open"); } this.classList.add("open"); } function toggelActive() { this.classList.add("open-active"); } panel.forEach((panel) => panel.addEventListener("click", toggleOpen)); panel.forEach((panel) => panel.addEventListener("transitionend", toggelActive)); <div class="panel panel1"> image.. </div> <div class="panel panel2"> image.. </div> <div class="panel panel3"> image.. </div> <div class="panel panel4"> image.. </div> <div class="panel panel5"> image.. </div>Creo que podría darnos más detalles, pero si solo desea cerrar una imagen cuando abre otra, puede eliminar todas las clases "abiertas" de sus paneles, como:
const panel = document.querySelectorAll(".panel"); function toggleOpen(element) { element.classList.toggle("open"); } function toggelActive(element) { element.classList.add("open-active"); } /** * Remove all open classes from your panel */ function removeAll() { panel.forEach((panel) => { panel.classList.remove("open", "open-active") }) } panel.forEach((panel) => panel.addEventListener("click", event => { /* First remove all classes */ removeAll(); toggleOpen(event.target) })); panel.forEach((panel) => panel.addEventListener("transitionend", event => { /* First remove all classes */ removeAll(); toggelActive(event.target) }));