如何让所有按钮生效？当前代码仅首个按钮可触发功能

问题根源 #

1. document.querySelector(".btn") 只会返回第一个匹配的元素，所以只有第一个按钮绑定了点击事件
2. 全局的div变量仅指向第一个.one元素，就算给所有按钮绑了事件，点击后也只会修改第一个盒子的样式

修正后的代码 #

JavaScript

// 获取所有按钮元素
const btns = document.querySelectorAll(".btn")

// 遍历每个按钮，绑定点击事件
btns.forEach(btn => {
  btn.addEventListener("click", function() {
    // 找到当前按钮所在的.box容器，再获取里面的.one元素
    const targetDiv = this.closest(".box").querySelector(".one")
    targetDiv.style.backgroundColor = "black"
  })
})

HTML（无需修改）

<div class="box">
  <div class="one">first</div>
  <div class="btn">first button</div>
</div>
<div class="box">
  <div class="one">second</div>
  <div class="btn">second button</div>
</div>
<div class="box">
  <div class="one">third</div>
  <div class="btn">third button</div>
</div>

CSS（无需修改）

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}

.one {
  margin: 20px;
  width: 200px;
  height: 200px;
  color: blue;
  background-color: red;
}

.btn {
  padding: 10px;
  margin: 1em;
  background-color: blue;
}

.form {
  flex-direction: column;
  margin: 2em;
}

关键说明 #

• document.querySelectorAll(".btn"): 获取页面中所有类名为btn的元素，返回一个可遍历的NodeList集合
• forEach: 遍历集合中的每个按钮，为每个按钮单独绑定点击事件
• this.closest(".box"): 从当前点击的按钮出发，向上查找最近的.box父容器（比parentNode更灵活，结构变化时也能适配）
• 找到对应容器后，再获取里面的.one元素，实现点击哪个按钮，修改对应盒子里的div样式的效果

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