TypeScript：为循环中元素数组中的每个元素分配一个事件

Question

我想出了下面的代码。问题是在更改时每个元素都会提醒最后一个迭代索引。例如，如果 elements 数组中有 24 个项目，每个元素发生变化时都会发出警报 "Changed row 23" 。我有点明白它为什么会发生，但无法绕过它，以便每个元素 onchange 都会提醒其索引而不是最后一个。任何帮助将不胜感激。

for (var i = 1; i < elements.length; i++) {
        elements[i].onchange = (ev: Event) => alert("Changed row " + i);
        usersTable.appendChild(elements[i]);
    }

Answer 1

使用Array.prototype.forEach，你可以将索引传递给回调函数...

elements.forEach((element, idx) => {
  elem.onchange = (ev: Event) => alert("Changed row " + idx);
  usersTable.appendChild(elem);
});

可以找到关于 Array.prototype.forEach 的文档 here

Answer 2

当你的事件被执行时，for 循环就会完成。那时 i 将等于循环结束时的值——elements.length - 1（这就是为什么它对你来说总是等于 23）。

您可以使用 Brocco 的解决方案解决此问题，但由于您想知道一种不更改循环的方法，因此您需要在设置 change 函数时传入 i 的值。这可以通过使用 IIFE:

来实现

for (var i = 1; i < elements.length; i++) {
    (function (i) {
        usersTable.appendChild(elements[i]);
        elements[i].onchange = (ev: Event) => alert("Changed row " + i);
    })(i);
}

这是表达 .forEach 函数为您做什么的更详细的方式。

或者，您也可以使用 .bind:

elements[i].onchange = function(i: number, ev: Event) {
    alert("Changed row " + i)
}.bind(this, i);

TypeScript：为循环中元素数组中的每个元素分配一个事件

TypeScript: Assign an event to each element in an element array on a loop

html

webpage

web

typescript