个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-05 05:40:05 25 4
gpt4 key购买 nike

抱歉，我需要帮助。我想制作一个愿望 list 切换按钮，点击图标 - fa-heart 从轮廓变为实心。我已经做到了。我的问题是，工具提示(添加到愿望 list )应该在目标元素上更改为“添加到愿望 list ”。但相反，它正在改变数组的所有元素。如何停止此行为以使其仅在目标元素上发生变化？谢谢。

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>

最佳答案

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

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

关于javascript - 当只有一个应该在点击时改变时，所有愿望 list 项目的文本都会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72493949/

25 4 0
文章推荐： python - 无法连接到 Google Playdeveloperreporting API
文章推荐： python - 将 YAML 文件加载到保留别名的 Python 中
文章推荐： javascript - 声明多个 document.getElementById ('' );几行变量
文章推荐： html - gtrends 错误版本 2 : Error in interest_over_time(widget, comparison_item, tz) : Status code was not 200. 返回状态码:401
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com