使用 JavaScript 中的数组中的事件侦听器构建菜单 [重复]答案

【问题标题】：Building menu with event listeners from array in JavaScript [duplicate]使用 JavaScript 中的数组中的事件侦听器构建菜单 [重复]
【发布时间】：2020-05-25 02:21:24
【问题描述】：

作为我的小项目，我正在构建一个网站，我需要根据服务器的响应动态添加内容。假设我想获取服务器当前正在侦听的端口。服务器返回一个 JSON 数组，如下所示：

[
    {"id": 0, "port": 80,  "active": true },
    {"id": 1, "port": 443, "active": false}
]

这个数组稍后会被称为ports。

然后，对于每个端口，我使用编辑按钮创建一个表格行来更改端口号或打开/关闭它。按钮的事件处理程序接收一个 port 对象作为参数，如下所示：

function editPort(port) {
  //port is a single object from array, for example: {"port": 80, "active": true}
  //doSomething();
}

我正在一个简单的循环中添加事件侦听器，如下所示：

for (port of ports) {
  //addRow();
  //addOtherCells();

  cell = document.createElement('td');
  cell.innerHTML = 'Edit port ' + port['port'];
  cell.addEventListener('click', () => {
    editPort(port);
  });

  //appendCellToRow(cell);
}

这显然不起作用，因为到时间循环结束时，port 是最后一个数组元素，并且无论实际上点击了哪一行，都会传递给处理程序。

所以我的问题是如何解决这个问题以使正确的元素被传递给处理程序而不是最后一个？

谢谢！

编辑：我正在使用 CoffeeScript 将循环编译成这样：

for (i = 0, len = ports.length; i < len; i++) {
  port = ports[i];
  ...
}

【问题讨论】：

我认为for(let port of ports) 对你有用。你能试一试吗？或者第二，您可以使用数据属性将 id 赋予 td，然后当您单击一个时，您可以获得数据属性并在数组中找到它
let port of ports 在 js 中工作，但我忘了提到我正在使用 coffeescript 作为前端，它将循环编译成这样：for (i = 0, len = ports.length; i < len; i++) { port = ports[i]; }
那么它应该是另一种方式，所以你可能想要做的只是使用上的数据属性，并将点击动作赋予 td 通常。在函数内部，您可能只是获取数据属性，然后使用它在数组上找到它并更改它？
这听起来像是让它工作的好方法
是的，试一试。如果您有问题，只需在此处发布您的新代码，也许我们可以提供帮助 =)