HTML DOM事件监听失效：第2及后续按钮无响应问题排查

你遇到的这个问题其实是JavaScript里很常见的作用域与闭包陷阱，而且刚好可以通过优化代码来实现DRY（Don't Repeat Yourself）的目标，我来给你拆解一下：

问题根源 #

你用var声明了place变量，而var是函数级作用域的变量——整个for循环里只有一个place实例，每次循环都会覆盖它的值。当循环结束时，place已经变成了最后一个索引（也就是5，因为你有6个按钮）。等你点击按钮触发回调函数时，它只会去操作page[5]，也就是最后一个.details元素，前面的按钮自然看起来没反应。

解决方案（附DRY优化） #

这里有几种既解决问题又符合DRY原则的写法：

1. 用let替代var（最简单的修复）

let是块级作用域，每次循环迭代都会创建一个独立的变量实例，回调函数会绑定当前迭代的那个值：

var page = document.querySelectorAll(".details");
var btn = document.querySelectorAll("button");
var book = document.querySelector(".card");

// 把循环里的var改成let，或者直接用let声明i
for(let i = 0; i < btn.length; i++){
 btn[i].addEventListener("click", function(){
 page[i].style.transform = "rotateY(-135deg)";
 });
}

book.addEventListener("mouseleave", function(){
 for(var i = 0; i < page.length; i++){
 page[i].style.transform = "";
 }
});

2. 用forEach遍历（最符合DRY的写法）

直接用forEach遍历按钮集合，自动获取当前元素和索引，代码更简洁：

const page = document.querySelectorAll(".details");
const btn = document.querySelectorAll("button");
const book = document.querySelector(".card");

btn.forEach((button, index) => {
 button.addEventListener("click", () => {
 page[index].style.transform = "rotateY(-135deg)";
 });
});

book.addEventListener("mouseleave", () => {
 // 同样用forEach处理重置逻辑，避免重复循环代码
 page.forEach(item => {
 item.style.transform = "";
 });
});

3. 闭包保存索引（传统解决方案）

通过立即执行函数（IIFE）创建独立作用域，把每次循环的索引值保存下来：

var page = document.querySelectorAll(".details");
var btn = document.querySelectorAll("button");
var book = document.querySelector(".card");

for(var i = 0; i < btn.length; i++){
 // 用IIFE把当前i封装成独立作用域的index
 (function(index){
 btn[index].addEventListener("click", function(){
 page[index].style.transform = "rotateY(-135deg)";
 });
 })(i);
}

book.addEventListener("mouseleave", function(){
 for(var i = 0; i < page.length; i++){
 page[i].style.transform = "";
 }
});

这几种方法都能解决你按钮失效的问题，其中forEach的写法最简洁易读，完全符合DRY原则，推荐你用这种。

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