如何基于元素ID为循环中每个项添加独特的点击函数？

我有若干个HTML <div> 元素，每个元素内部嵌套了另一个<div>。嵌套元素负责CSS样式，外层元素负责JavaScript交互（外层<div>是必需的，因为若由嵌套元素检测点击，其命中框会存在空隙）。

示例代码 #

JavaScript #

window.onload = function() {
  const buttons = document.getElementsByClassName('icon-wrapper');
  [...buttons].forEach(button => button.addEventListener('click', function() {
    var target = this.children[0]
    target.classList.toggle('toggled')
    console.log(target)
    // code dependant on the value of this
  }))
};

CSS #

/* css for each button has been removed because I don't want to release them yet...*/

body {
  margin: 5%;
  display: flex;
  -moz-column-gap: 5%;
  column-gap: 5%;
  row-gap: 5%;
}

.icon-wrapper {
  height: 8vmin;
  width: 8vmin;
  position: relative;
  display: flex;
  cursor: pointer;
  /* extra code for visablility */
  background-color: black;
}

HTML #

<div class="icon-wrapper">
  <div id="menu-icon"></div>
</div>
<div class="icon-wrapper">
  <div id="full-screen-icon"></div>
</div>
<div class="icon-wrapper">
  <div id="tab-icon"></div>
</div>
<div class="icon-wrapper">
  <div id="volume-icon"></div>
</div>
<iframe class="windowed" id="iframe" frameborder="0" allowtransparency="true" src="https://www.heavensgate.com/">
</iframe>

每个按钮需要实现独特的功能。目前的问题是无法根据目标元素为每个事件监听器分配独特函数：

• 点击包含full-screen-icon的icon-wrapper时，<iframe>需请求全屏
• 点击包含tab-icon的icon-wrapper时，<iframe>需在新标签页打开

希望通过forEach循环为每个按钮绑定对应函数，且函数逻辑基于嵌套元素的ID而非数组索引，确保元素重排后功能不会失效。

可以通过创建ID-功能映射对象来实现需求，将每个嵌套元素的ID与对应的处理函数绑定，这样无论元素顺序如何调整，只要ID不变，功能逻辑就不会出错。

修改后的JavaScript代码如下：

window.onload = function() {
  const iframe = document.getElementById('iframe');
  // 建立ID到对应功能的映射表
  const buttonActions = {
    'menu-icon': () => {
      // 菜单按钮的自定义逻辑
      console.log('菜单按钮触发');
    },
    'full-screen-icon': () => {
      // 全屏功能实现（兼容主流浏览器）
      if (iframe.requestFullscreen) {
        iframe.requestFullscreen();
      } else if (iframe.webkitRequestFullscreen) {
        iframe.webkitRequestFullscreen();
      } else if (iframe.mozRequestFullScreen) {
        iframe.mozRequestFullScreen();
      }
    },
    'tab-icon': () => {
      // 新标签页打开iframe链接
      window.open(iframe.src, '_blank');
    },
    'volume-icon': () => {
      // 音量控制的自定义逻辑
      console.log('音量按钮触发');
    }
  };

  const buttons = document.getElementsByClassName('icon-wrapper');
  [...buttons].forEach(button => button.addEventListener('click', function() {
    const target = this.children[0];
    target.classList.toggle('toggled');
    // 根据嵌套元素ID执行对应功能
    const action = buttonActions[target.id];
    if (action) {
      action();
    }
  }));
};

方案优势 #

• 基于ID绑定功能，元素重排后不会影响逻辑
• 代码结构清晰，新增或修改功能只需调整buttonActions对象，维护成本低
• 彻底避免了依赖数组索引的耦合问题

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