如何实现点击对应按钮为指定content元素添加类？

你当前的问题是代码中固定选取了第一个content元素（children[0]），导致无论点击哪个按钮都只会操作第一个内容块。要实现点击第n个按钮对应操作第n个content元素，可利用forEach的索引参数建立按钮和内容的对应关系：

修改后的JavaScript代码 #

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

// 利用forEach的第二个参数index获取当前按钮的位置
btns.forEach((btn, index) => {
  btn.addEventListener("click", () => {
    // 通过index直接获取对应的content元素
    content[index].classList.toggle("addClass")
  })
})

代码说明 #

1. btns.forEach((btn, index) => {})：forEach的第二个参数index会返回当前按钮在btns列表中的位置（从0开始计数），第一个按钮对应index=0，第二个对应index=1，以此类推。
2. content[index]：因为按钮和content元素是一一对应的，用相同的index就能拿到当前按钮对应的content元素。
3. classList.toggle("addClass")：保留你原本的切换逻辑，点击一次添加类，再点击一次移除类。

完整代码示例 #

<div class="main-container">
  <div class="btn-container">
      <div class="btn first">Button</div>
      <div class="btn second">Button</div>
      <div class="btn third">Button</div>
      <div class="btn fourth">Button</div>
  </div>
  <div class="content-container">
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
  </div>
</div>

.main-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn {
  background: blue;
  width: 100px;
  margin-bottom: 10px;
  text-align: center;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
  letter-spacing:1px;
  font-weight: 100;
  cursor: pointer; /* 增加鼠标指针样式，提升交互体验 */
}

.content {
  background: green;
  width: 300px;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
  margin-bottom: 10px;
}

.content.addClass {
  background: red;
}

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

btns.forEach((btn, index) => {
  btn.addEventListener("click", () => {
    content[index].classList.toggle("addClass")
  })
})

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