Quiero agregar tomar una clase de un elemento para hacer clic, al primer clic para poner mi clase y al segundo para sacar mi clase. Solo logré agregar la clase al primer clic y no puedo volver a la normalidad con el segundo clic en el elemento. También intenté alternar, pero falta algo y no sé qué. Gracias: D
const items = document.querySelectorAll(".item"); items.forEach(item => { item.addEventListener('click', function() { items.forEach(el => el.classList.remove('active')); this.classList.add('active'); }) }); .list { margin: 100px auto; display: flex; justify-content: space-around; align-items: center; width: 700px; } .item { width: 100px; aspect-ratio: 1; background-color: blueviolet; } .active { background-color: brown; } <div class="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>Debe almacenar el estado activo del elemento en el que se hizo clic antes de eliminar la clase active de todos los elementos. Luego, puede establecer el estado activo del elemento en el que se hizo clic en el opuesto de lo que era.
const items = document.querySelectorAll(".item"); items.forEach(item => { item.addEventListener('click', function() { // Get the active state of the clicked element let active = this.classList.contains("active"); items.forEach(el => el.classList.remove('active')); // Toggle the active state of the clicked element if(active){ this.classList.remove("active"); } else { this.classList.add("active"); } }) }); .list { margin: 100px auto; display: flex; justify-content: space-around; align-items: center; width: 700px; } .item { width: 100px; aspect-ratio: 1; background-color: blueviolet; } .active { background-color: brown; } <div class="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>No tiene que recorrer todos los elementos cada vez. Simplemente puede buscar el elemento actualmente activo. Esto debería funcionar:
const items = document.querySelectorAll(".item"); items.forEach(item => { item.addEventListener('click', function(){ // Check if clicked element is active if (this.classList.contains("active")){ // Element was active, deactivate and terminate this.classList.remove("active"); return; } // Element clicked was not active // Find active element in list and deactivate, if any var activeElement = document.querySelector(".list .active"); if (activeElement != null) activeElement.classList.remove("active"); this.classList.add("active"); }) });Ver demostración en vivo .