如何根据项目的 ID 为循环中的每个项目添加唯一的函数？

Question

我有一些 html

<div>

元素，每个元素中都嵌套有另一个

<div>

。嵌套元素负责 CSS，外部元素负责 JavaScript。 （外部

<div>

元素是必要的，因为如果嵌套元素负责检测点击，则其命中框中会有孔。）

无论如何，为了帮助我解释，这是我的代码：

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

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

现在来看看实际细节！正如您所看到的，每个按钮都有独特的功能。我的问题是，我无法根据每个事件监听器的目标元素为其分配唯一的函数。例如，当单击包含全屏按钮

<div>

的第二个图标包装时，

<iframe>

元素将请求全屏。但是，当单击第三个按钮时，

<iframe>

将在新选项卡中打开。基本上，我希望

forEach

循环的每次迭代都有不同的功能。最后，如果可能的话，我还希望 unique 函数基于嵌套元素的 Id，而不是循环/数组的索引，这样我就可以在不破坏元素的情况下对元素进行重新排序。

我希望我在这篇文章中明白了要点，但如果您需要我详细说明任何内容，请询问。

编辑：除非他们发布独立的答案，否则请检查评论以了解 Barmar 所说的内容，这似乎就是我所追求的。

Answer 1

发布我在@Barmar 的评论中得到的答案

“您可以使用

switch

语句：

switch(target.id)

”

Answer 2

您可以使用一个对象将每个 id 与单击时执行的函数关联起来（Barmar 也提到过）。

还要注意，如果使用

document.querySelectorAll

，则可以直接调用

forEach

，而无需先将结果转换为数组。

const fns = {
    "menu-icon"() {
        console.log('menu icon clicked');
    },
    "full-screen-icon"() {
        console.log('full screen icon clicked');
    }
    // ...
}
document.querySelectorAll('.icon-wrapper').forEach(wrapper =>
    wrapper.addEventListener('click', fns[wrapper.firstElementChild.id]));