Question

我相信每个人都会使用javascript会遇到这个问题，但因为我真的不知道封闭是如何工作的，所以我自己无法解决。

    var hint = ["str", "str", "str", "str", "str"];
    var inputIDs = ["ip-name", "ip-pwd", "ip-pwd-cfm", "ip-email", "ip-phone"];
    var errorMsg = [];
    for (var i = 0; i<hint.length; i++) {
        document.getElementById(inputIDs[i]).addEventListener("focus", function (e) {
            var tar = e.target.parentElement.getElementsByClassName("alert")[0];
            tar.innerHTML = hint[i];
        });
    }

我想迭代地将焦点事件绑定到每个元素。但是如果我使用上面的代码，每次执行该函数时，i都是5.

我想我应该在这里使用闭包来获得i的值，因为我想要。

有人可以提出建议吗？

Answer 1

在循环内创建一个闭包并将其与i

绑定

var hint = ["str", "str", "str", "str", "str"];
var inputIDs = ["ip-name", "ip-pwd", "ip-pwd-cfm", "ip-email", "ip-phone"];
var errorMsg = [];
for (var i = 0; i < hint.length; i++) {
  (function(i) { // creating a closure
    document.getElementById(inputIDs[i]).addEventListener("focus", function(e) {
      var tar = e.target.parentElement.getElementsByClassName("alert")[0];
      tar.innerHTML = hint[i];
    });
  }(i))

}

Answer 2

我认为更简单，更清晰的解决方案是使用forEach，在工作示例下方，您可以专注于input标记，以便在控制台中查看结果。

var hint = ["str", "str", "str", "str", "str"];
var inputIDs = ["ip-name", "ip-pwd", "ip-pwd-cfm", "ip-email", "ip-phone"];
var errorMsg = [];
inputIDs.forEach(function(item, i){
  document.getElementById(inputIDs[i]).addEventListener("focus", function(e) {
  console.log(i);
  // I comment out this code just to keep this example more simple  
  //var tar = e.target.parentElement.getElementsByClassName("alert")[0];
  //tar.innerHTML = hint[i];
  });
});

<input id="ip-name" type="text">
<input id="ip-pwd" type="text">
<input id="ip-pwd-cfm" type="text">
<input id="ip-email" type="text">
<input id="ip-phone" type="text">

javascript - 如何使用闭包将事件绑定到循环中的元素数组？

2 个答案: