本文详解如何使用 queryselectorall 和事件委托，为所有具有相同类名的按钮独立添加点击翻转动画，解决原生 javascript 中仅作用于首个元素的常见问题。
本文详解如何使用 queryselectorall 和事件委托，为所有具有相同类名的按钮独立添加点击翻转动画，解决原生 javascript 中仅作用于首个元素的常见问题。
在实际开发中，我们常需为一组结构相同的按钮（如多个 .reserve 按钮）统一添加交互行为——例如点击后沿 Y 轴旋转 180°，显示其 ::after 伪元素构成的“背面”。但若使用 document.querySelector('.reserve')，仅会匹配第一个匹配元素，导致其余按钮无响应。
正确做法是改用 document.querySelectorAll() 获取所有目标节点，并通过遍历为每个按钮单独绑定事件监听器。关键在于：事件处理中应操作 event.target（即被点击的具体按钮），而非全局变量，从而确保各按钮状态相互独立。
以下是优化后的完整实现：
// 获取所有带有 .reserve 类的按钮（返回 NodeList）
const flipButtons = document.querySelectorAll(".reserve");
// 遍历每个按钮，为其绑定点击事件
flipButtons.forEach(button => {
button.addEventListener('click', (e) => {
e.target.classList.toggle("flip"); // ✅ 只切换当前被点击按钮的类
});
});
⚠️ 注意事项：
- querySelectorAll 返回的是静态 NodeList，不支持直接调用 forEach（部分旧版浏览器），但现代浏览器及主流构建环境均兼容；若需兼容性更强，可使用 [...flipButtons].forEach(...) 或 Array.from(flipButtons).forEach(...)。
- 不要将 e.target 替换为 button（如 button.classList.toggle(...)），因为 button 是循环变量，而 e.target 才是真实触发事件的 DOM 元素（尤其当按钮内含图标、文字等子元素时更可靠）。
- CSS 中需确保 .button 启用 3D 渲染上下文（transform-style: preserve-3d）和背面可见性控制（backface-visibility: visible/hidden），否则翻转动画可能失效或闪烁。
补充说明：若后续动态添加新按钮，上述代码不会自动绑定事件。此时建议改用事件委托（监听父容器），但对当前静态按钮场景，forEach + addEventListener 是最直观、易维护的方案。
最终效果：每个按钮点击后独立翻转，互不影响，且伪元素内容（如示例中的 'X'）精准呈现在背面，兼顾语义化与视觉一致性。
