当点击时只有一项应更改时，所有愿望清单项目的文本都会更改

Question

对不起，伙计们，我需要帮助。 我想在点击图标时进行愿望清单切换 - fa-heart 从轮廓变为实心。 我已经做到了。 我的问题是，工具提示（添加到愿望清单）应该在目标元素上更改为“添加到愿望清单”。 但相反，它正在改变数组的所有元素。 如何停止此行为以使其仅在目标元素上更改？ 谢谢。

 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>

Answer 1

不要使用循环来更新所有标签。 只需更改当前按钮后的标签即可。

  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()
    }
  })

当点击时只有一项应更改时，所有愿望清单项目的文本都会更改

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-06-03 18:59:51

当点击时只有一项应更改时，所有愿望清单项目的文本都会更改

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-06-03 18:59:51

解决方案1
1 已采纳 2022-06-03 18:59:51