如何让每个按钮都起作用？ [重复]

Question

编写的代码仅适用于第一个按钮。如何让它适用于第二个和每个后续的。据说是 forEach 方法，但我觉得有点迷路了。提前致谢。

const btns = document.querySelector(".btn")
const div = document.querySelector(".one")

const change = () => {
  div.style.backgroundColor = "black"
}
btns.addEventListener("click", change)

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;
}

<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>

Answer 1

QuerySelector 将返回第一个对应的元素。 为了有一个数组，使用 querySelectorAll.

同理，你的 change 回调只会修改第一个 .one 元素。 这段代码应该可以解决问题：

const btns = document.querySelectorAll('.btn');

btns.forEach(b => {
b.addEventListener("click", function(e){
   let div = e.target.closest(".box").querySelector(".one");
   div.style.backgroundColor="black";
})
});

Answer 2

试试

.forEach

const btns=document.querySelectorAll(".btn")

代替：

btns.addEventListener("click", change)

尝试：

btns.forEach(button=>button.addEventListener("click", change))