HTML/CSS/JS闪卡程序全量翻转功能异常求助

问题 #

开发文本转闪卡程序时，「Flip All」按钮无法实现双向全量翻转，仅能在特定情况下将闪卡从背面翻转为正面。

原因 #

当前flipAll函数逻辑错误：它没有直接触发卡片翻转动作，而是给每个卡片重复绑定click事件。每次点击按钮都会新增一轮事件绑定，导致：

• 第一次点击按钮时，仅完成事件绑定，没有实际执行翻转
• 后续点击按钮会叠加事件，触发多次classList.toggle，出现翻转异常

修复方案 #

修改flipAll函数，直接遍历所有闪卡并切换flipped类，无需绑定额外点击事件：

function flipAll() {
  const cards = document.querySelectorAll('.card');
  cards.forEach(card => {
    card.classList.toggle('flipped');
  });
}

说明 #

修改后的函数在点击「Flip All」按钮时，会直接对每一张闪卡的flipped类进行切换，无论当前卡片处于正面还是背面状态，都会完成翻转操作，实现双向全量翻转的需求，同时避免了重复绑定事件导致的异常和内存泄漏问题。

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