如何用原生JavaScript实现多组button与div的独立显示隐藏切换？

你遇到的问题是典型的循环绑定事件时的变量作用域陷阱——用var声明循环变量时，所有事件处理函数都会共享同一个变量引用，最终指向循环的最后一个元素。下面是几种不依赖DOM节点关系的原生JavaScript解决方案，核心思路是通过自定义属性关联按钮和目标div：

方案1：利用let的块级作用域（ES6+） #

let会在每次循环中创建独立的块级作用域，确保每个事件处理函数引用的是当前循环的变量：

<button data-target="div1">切换div1</button>
<button data-target="div2">切换div2</button>

<div id="div1" style="display: none;">内容1</div>
<div id="div2" style="display: none;">内容2</div>

<script>
const buttons = document.querySelectorAll('button');
for (let i = 0; i < buttons.length; i++) {
  const targetId = buttons[i].dataset.target;
  buttons[i].addEventListener('click', function() {
    const targetDiv = document.getElementById(targetId);
    targetDiv.style.display = targetDiv.style.display === 'none' ? 'block' : 'none';
  });
}
</script>

方案2：闭包锁定变量（兼容旧环境） #

如果需要兼容不支持ES6的环境，用立即执行函数（IIFE）包裹循环逻辑，为每个事件处理函数创建独立作用域：

<button data-target="div1">切换div1</button>
<button data-target="div2">切换div2</button>

<div id="div1" style="display: none;">内容1</div>
<div id="div2" style="display: none;">内容2</div>

<script>
const buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  (function(currentIndex) {
    const targetId = buttons[currentIndex].dataset.target;
    buttons[currentIndex].addEventListener('click', function() {
      const targetDiv = document.getElementById(targetId);
      targetDiv.style.display = targetDiv.style.display === 'none' ? 'block' : 'none';
    });
  })(i);
}
</script>

方案3：forEach遍历（简洁推荐） #

forEach的回调函数本身自带独立作用域，无需额外处理变量问题，代码更简洁直观：

<button data-target="div1">切换div1</button>
<button data-target="div2">切换div2</button>

<div id="div1" style="display: none;">内容1</div>
<div id="div2" style="display: none;">内容2</div>

<script>
document.querySelectorAll('button').forEach(btn => {
  const targetId = btn.dataset.target;
  btn.addEventListener('click', () => {
    const targetDiv = document.getElementById(targetId);
    targetDiv.style.display = targetDiv.style.display === 'none' ? 'block' : 'none';
  });
});
</script>

方案4：事件委托（动态元素场景） #

如果按钮是动态生成的，推荐用事件委托——把事件绑定到父容器，通过事件冒泡机制处理点击，无需给每个按钮单独绑定事件：

<div id="button-group">
  <button data-target="div1">切换div1</button>
  <button data-target="div2">切换div2</button>
</div>

<div id="div1" style="display: none;">内容1</div>
<div id="div2" style="display: none;">内容2</div>

<script>
document.getElementById('button-group').addEventListener('click', function(e) {
  // 确保点击的是按钮元素
  if (e.target.tagName === 'BUTTON') {
    const targetId = e.target.dataset.target;
    const targetDiv = document.getElementById(targetId);
    targetDiv.style.display = targetDiv.style.display === 'none' ? 'block' : 'none';
  }
});
</script>

所有方案的核心都是通过data-target自定义属性，将按钮与对应的div的id关联起来，完全不需要依赖两者的DOM层级关系，灵活适配各种页面结构。

内容的提问来源于stack exchange，提问作者P. James Norris