<div> <div class=category> Birthdays </div> <div class=category> Anniversaries </div> <div class=category> Newborns </div> <div class=category> Weddings </div> </div> <ul> <li class="product-filter-items">Birthdays</li> <li class="product-filter-items">Weddings</li> <li class="product-filter-items">Newborns</li> <li class="product-filter-items">Anniversaries</li> </ul> <script> let proCatList = document.querySelectorAll(".category") let proFilterItems = document.querySelectorAll(".product-filter-items") for(let i = 0; i < proFilterItems.length; i++){ proFilterItems[i].addEventListener("click" , function(){ if (proCatList[i].textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim() == proFilterItems[i].textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim() ){ proFilterItems[i].classList.add("active-filter") console.log("Class Added") } }) } </script>Estoy tratando de agregar una clase basada en un evento de clic. Lo que estoy tratando de hacer es si el nombre de clase, la categoría y los elementos de filtro de producto son iguales, entonces debería agregar un nombre de clase llamado filtro activo al hacer clic. ¿Alguien puede señalar por qué esta declaración no reconoce el contenido de texto de proCatList?
El i de iteración no se puede usar en el controlador de eventos. Por lo tanto, podría usar el índice del elemento en el que se hizo clic, al que puede llamar con this .
Para obtener el índice, puede usar la siguiente función pequeña:
const getIndex = elem => [...elem.parentNode.children].indexOf(elem);Ejemplo de trabajo:
let proCatList = document.querySelectorAll(".category"); let proFilterItems = document.querySelectorAll(".product-filter-items"); /* small function for getting the index */ const getIndex = elem => [...elem.parentNode.children].indexOf(elem); for (let i = 0; i < proFilterItems.length; i++) { proFilterItems[i].addEventListener("click", function() { const elem_index = getIndex(this); if (proCatList[elem_index].textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim() == this.textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim()) { this.classList.add("active-filter"); console.log("Class Added"); } }) } <div> <div class=category> Birthdays </div> <div class=category> Anniversaries </div> <div class=category> Newborns </div> <div class=category> Weddings </div> </div> <ul> <li class="product-filter-items">Birthdays</li> <li class="product-filter-items">Weddings</li> <li class="product-filter-items">Newborns</li> <li class="product-filter-items">Anniversaries</li> </ul>