多堆叠卡片：翻转顶部卡片与添加掉落效果按钮失效求助

核心问题梳理 #

• 代码重复定义：重复声明了cards、flipBtn变量及对应事件监听，覆盖了原有逻辑，导致按钮行为异常。
• 翻转按钮逻辑缺失：点击事件内部为空（代码被注释），且注释内的this指向错误，同时未针对顶部卡片操作，而是遍历所有卡片。
• 删除按钮逻辑错误：cards是querySelectorAll返回的NodeList集合，直接调用cards.classList.add('fall')无效——集合本身没有classList属性，需操作单个目标卡片。

修复后的完整代码 #

// 获取所有卡片
const cards = document.querySelectorAll(".card");
// 获取翻转按钮
const flipBtn = document.querySelectorAll('.fliping');
// 获取删除按钮
const deleteBtns = document.querySelectorAll('.delete');

// 翻转按钮：切换顶部卡片的翻转状态（假设最后一个卡片是堆叠顶部）
flipBtn.forEach(item => {
  item.addEventListener('click', () => {
    const topCard = cards[cards.length - 1];
    if (topCard) {
      topCard.classList.toggle('flipcard');
    }
  });
});

// 删除按钮：给顶部卡片添加掉落类，动画结束后移除DOM
deleteBtns.forEach(item => {
  item.addEventListener('click', () => {
    const topCard = cards[cards.length - 1];
    if (topCard) {
      topCard.classList.add('fall');
      // 动画结束后移除卡片，避免影响后续顶部判断
      topCard.addEventListener('animationend', () => {
        topCard.remove();
      }, { once: true });
    }
  });
});

额外说明 #

• 若你的卡片堆叠顺序是第一个为顶部，把cards[cards.length - 1]替换为cards[0]即可。
• animationend事件监听用于在掉落动画完成后移除卡片，避免残留DOM干扰后续操作，可根据需求选择保留或删除。

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