Lo siento chicos necesito ayuda. Quiero cambiar la lista de deseos al hacer clic en el ícono: el corazón cambia de contorno a sólido. eso lo he logrado Mi problema es que la información sobre herramientas (agregar a la lista de deseos) debe cambiar en el elemento de destino a "agregado a la lista de deseos". Pero en cambio, está cambiando en todos los elementos de la matriz. ¿Cómo puedo detener este comportamiento para que cambie solo en el elemento de destino? Gracias.
let i, j, toolTip; let addItem; for (i = 0; i < addToWish.length; i++) { let addItem = addToWish[i]; function addToWishList() { addItem.classList.add('fas'); addItem.classList.add('far'); favIconData++; favDataOutput.textContent = favIconData; navActionBadge.setAttribute('value', `${favIconData}`); if (favIconData >= 1) { favoriteIcon.classList.add('fas'); favoriteIcon.classList.remove('far'); } else { favoriteIcon.classList.remove('fas') favoriteIcon.classList.add('far') } } function removeWishList() { addItem.classList.remove('fas'); addItem.classList.add('far'); favIconData--; favDataOutput.textContent = favIconData; navActionBadge.setAttribute('value', `${favIconData}`); if (favIconData >= 1) { favoriteIcon.classList.add('fas'); favoriteIcon.classList.remove('far'); } else { favoriteIcon.classList.remove('fas') favoriteIcon.classList.add('far') } } addItem.addEventListener('click', () => { if (addItem.classList.contains('fas')) { for (let j = 0; j < cardLabel.length; j++) { let label = cardLabel[j]; label.textContent = 'Add to wishlist'; } removeWishList() } else { for (let j = 0; j < cardLabel.length; j++) { let label = cardLabel[j]; label.textContent = 'Added to wishlist'; } addToWishList() } }) } <html> <li class="card-action-item"> <button class="card-action-btn" aria-labelledby="card-label-2"> <i id="fav" class="far fa-heart">.</i> </button> <div class="card-action-tooltip" id="card-label-3">Add to Wishlist</div> </li> </html>No utilice un bucle para actualizar todas las etiquetas. Simplemente cambie la etiqueta después del botón actual.
addItem.addEventListener('click', () => { let label = addItem.closest(".card-action-item").querySelector(".card-action-tooltip"); if (addItem.classList.contains('fas')) { label.textContent = 'Add to wishlist'; removeWishList() } else { label.textContent = 'Added to wishlist'; addToWishList() } })