如何为不同长度数组元素绑定EventListener，实现按钮与div正确关联？

给定一组<button>和<div>，示例结构如下：

<button class="buttTest" id="butt1">butt 1</button>
<button class="buttTest" id="butt2">butt 2</button>
<!-- <button class="buttTest" id="butt3">butt 3</button> DISABLED OR MISSING BUTTON-->
<button class="buttTest" id="butt4">butt 4</button>
<button class="buttTest" id="butt5">butt 5</button>

<div class="divTest" id="div1">div 1</div>
<div class="divTest" id="div2">div 2</div>
<div class="divTest" id="div3">div 3</div>
<div class="divTest" id="div4">div 4</div>
<div class="divTest" id="div5">div 5</div>

需求是给每个按钮绑定点击事件，点击时隐藏对应的<div>。初始尝试的JavaScript代码如下：

const buttArray = document.getElementsByClassName("buttTest");
const divArray = document.getElementsByClassName("divTest");

for (let i=0;i<=buttArray.length;i++) {
  buttArray[i].addEventListener("click", function () {divArray[i].style.display = 'none'})
}

但当存在按钮缺失或禁用时，<button id="butt-i">与<div id="div-i">的对应关系会错乱，比如点击butt4会隐藏div3而非div4，需要实现元素正确对应的可行方案。

方法1：从按钮ID提取数字定位目标div #

直接利用按钮ID里的数字后缀，拼接出对应div的ID，通过getElementById获取目标元素，完全不依赖数组索引，从根源避免错位：

const buttons = document.getElementsByClassName("buttTest");

for (const button of buttons) {
  // 从按钮ID提取数字，比如"butt4"得到"4"
  const num = button.id.replace('butt', '');
  const targetDiv = document.getElementById(`div${num}`);
  
  if (targetDiv) { // 确保目标div存在再绑定事件
    button.addEventListener('click', () => {
      targetDiv.style.display = 'none';
    });
  }
}

方法2：构建映射表（Lookup Table） #

先提前建立div的ID到元素的映射，绑定按钮事件时直接从映射表取目标元素：

// 构建div的ID-元素映射表
const divMap = new Map();
const divs = document.getElementsByClassName("divTest");
for (const div of divs) {
  divMap.set(div.id, div);
}

// 遍历按钮绑定事件
const buttons = document.getElementsByClassName("buttTest");
for (const button of buttons) {
  // 推导对应div的ID：把butt换成div
  const targetDivId = button.id.replace('butt', 'div');
  const targetDiv = divMap.get(targetDivId);
  
  if (targetDiv) {
    button.addEventListener('click', () => {
      targetDiv.style.display = 'none';
    });
  }
}

方法3：事件委托（高效简洁） #

如果所有按钮有共同父容器，只在父元素上绑定一次事件，通过事件目标判断点击的按钮，再定位对应div。假设父容器ID为container：

const container = document.getElementById('container');

container.addEventListener('click', (e) => {
  if (e.target.classList.contains('buttTest')) {
    const num = e.target.id.replace('butt', '');
    const targetDiv = document.getElementById(`div${num}`);
    if (targetDiv) {
      targetDiv.style.display = 'none';
    }
  }
});

这种方法不用遍历所有按钮，新增按钮也能自动生效，适合动态生成元素的场景。

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