const navLinks = document.querySelectorAll(".nav-link"); navLinks.forEach((link) => { link.addEventListener("click", (e) => { console.log(e.target.classList); return e.target.classList.toggle("active"); }); });Cuando cierro la sesión de la lista de clases, obtengo una lista de todos los elementos con la clase navLink, no la clase en la que se hizo clic. Tengo la sensación de que es para cada función que estoy usando. ¿Cómo obtengo el clasificador correcto como en el enlace en el que se hizo clic? , ahora mismo, cuando cierro la sesión, obtengo clases en todos los elementos del enlace de navegación.
Use stopPropagation para evitar una mayor propagación de eventos
classList es un objeto ArrayLike, en realidad no es una matriz. Pero se puede convertir a Array.
const navLinks = document.querySelectorAll(".nav-link"); navLinks.forEach((link) => { link.addEventListener("click", (e) => { e.stopPropagation(); // prevents further propagation of the current event in the capturing and bubbling phases console.log('Array: ', Array.from(e.target.classList)); console.log('ArrayLike: ', e.target.classList); return e.target.classList.toggle("active"); }); }); .nav-link { width: 150px; height: 50px; border: 1px solid gray; } <div class="nav-link 1-item"></div> <div class="nav-link 2-item"></div> <div class="nav-link 3-item"></div> <div class="nav-link 4-item"></div>