如何阻止收藏按钮重复添加相同的Advice内容？

核心问题分析 #

1. 重复绑定事件：每次点击骰子按钮时，都会给favouriteSection添加新的点击事件监听，导致一次点击触发多次收藏操作。
2. 无重复校验：点击收藏时未检查当前建议是否已存在于收藏区，直接执行添加逻辑。

修改方案 #

1. 调整事件监听位置 #

将收藏按钮的点击事件监听移到骰子按钮的点击事件外部，确保只绑定一次，避免重复触发。

2. 添加重复校验逻辑 #

利用API返回的建议唯一ID作为判断依据，检查收藏区中是否已存在该ID的建议，已存在则跳过添加操作。

修改后的完整JavaScript代码 #

// GET
const getAdviceNumber = document.querySelector('#adviceNumber');
const adviceResultsDiv = document.querySelector('#adviceResults');
const diceBtn = document.querySelector('#spinDice');
const staticText = document.querySelector('#static');
const favouriteSection = document.querySelector('.favouriteSection')

// 存储当前显示的建议ID，用于收藏校验
let currentAdviceId = null;

diceBtn.addEventListener('click', () => {
  const getAPI = async () => {
    // Call API
    /* eslint-disable */ 
    const res = await axios.get('https://api.adviceslip.com/advice');
    currentAdviceId = res.data.slip.id;

    // remove static text
    staticText.remove();

    // Generate spin on btn
    const element = document.querySelector('#spinDice');
    element.classList.add('rotateMe');
    setTimeout(() => element.classList.remove('rotateMe'), 800);

    // generate unique id number
    const header = document.createElement('h1');
    header.className = 'title';
    header.append(` ADVICE # ${currentAdviceId}`);
    while (getAdviceNumber.childElementCount > 0) {
      getAdviceNumber.firstChild.remove();
    }

    getAdviceNumber.append(header);

    // generate unique advice
    const para = document.createElement('p');
    para.className = 'para';
    para.append(`"${res.data.slip.advice}"`);
    while (adviceResultsDiv.childElementCount > 0) {
      adviceResultsDiv.firstChild.remove();
    }
     adviceResultsDiv.append(para);
    

    //generate add to favourites button 
    const addFavourite = document.createElement('p');
    addFavourite.className = 'fav';
    addFavourite.innerHTML = `<p>Add to Favourites<i class="fa-solid fa-folder-plus"></i></p>`;
    // 只移除旧的收藏按钮，保留已添加的收藏项
    const existingFavBtn = favouriteSection.querySelector('.fav');
    if (existingFavBtn) {
      existingFavBtn.remove();
    }
    favouriteSection.prepend(addFavourite)
  };
  getAPI();
});

// 收藏按钮点击事件，仅绑定一次
favouriteSection.addEventListener('click', (e) => {
  // 仅在点击收藏按钮时触发逻辑
  if (!e.target.closest('.fav')) return;

  if (!currentAdviceId) return;

  // 检查当前建议是否已在收藏区
  const isAlreadyFavourited = Array.from(favouriteSection.querySelectorAll('.favouriteItemBorder')).some(item => {
    return item.dataset.adviceId === currentAdviceId.toString();
  });

  if (isAlreadyFavourited) return;

  // 创建收藏项
  const favouriteItem = document.createElement('p');
  favouriteItem.className = 'favouriteItemBorder';
  // 用自定义属性存储建议ID，用于后续校验
  favouriteItem.dataset.adviceId = currentAdviceId;
  favouriteItem.innerHTML = `<p class="icons"><i class="fa-solid fa-magnifying-glass"></i> <i class="fa-solid fa-trash-can"></i></p>`;
  favouriteItem.append(`${getAdviceNumber.textContent}: ${ adviceResultsDiv.textContent}`);
  favouriteSection.appendChild(favouriteItem);
});

关键修改点说明 #

• currentAdviceId变量：实时记录当前显示的建议ID，作为重复校验的唯一标识。
• 事件监听独立绑定：避免每次点击骰子按钮重复绑定收藏事件，解决一次点击多次添加的问题。
• 收藏项ID标记：通过dataset.adviceId给每个收藏项绑定对应建议ID，方便快速校验。
• 保留历史收藏：将原清空整个收藏区的逻辑改为仅移除旧收藏按钮，保留已添加的收藏内容。

内容的提问来源于stack exchange，提问作者Oshanedesign