与“for”循环具有相同值的输入元素

Sagar 发表于 Dev

萨加尔

我刚刚在试验 JavaScript 并且正在尝试这段代码。

var elements = document.getElementsByTagName("p");
var n = elements.length; // Should be: 10

for (var i = 0; i < n; i++) {
  elements[i].onclick = function () {
    console.log("This is element #" + i);
  };
}

<p>Element: #1</p>
<p>Element: #2</p>
<p>Element: #3</p>
<p>Element: #4</p>
<p>Element: #5</p>

但是，当代码运行时，会发生一些奇怪的事情。基本上，例如，如果您单击元素#1，它会说您单击了元素#5。

这是我很想知道的：

为什么会出现这种情况？
有解决办法吗？

阿纳夫·托拉特

您可以使用下面的代码来更正这些问题。

var elements = document.getElementsByTagName("p");
var n = elements.length;

function makeHandler(num) {
     return function() {
         console.log("This is element #" + num);
     };
};

for (var i = 0; i < n; i++) {
    elements[i].onclick = makeHandler(i + 1);
}

让我们解释一下代码。

基本上，在这段代码中，makeHandler每次我们通过循环时都会立即执行，每次接收当前的值i + 1并将其绑定到一个作用域num变量。

外部函数 ( makeHandler) 返回内部函数（匿名函数）（它也使用这个作用域num变量）并且元素onclick被设置为该内部函数。

这确保每个人都onclick接收和使用正确的i值（通过范围num变量）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。