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

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

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

All wishlist items text changes when only one should change on click

javascript