javascript - 在循环中创建 Onchange 函数

Question

我正在 for 循环中创建动态输入。每个输入都有自己的 onchange 函数，用于检查其值是否大于数组值。在每个 onchange 函数中，arrId 变量始终为 6，它是数组中的最后一个元素。

是否有可能使其正确？如果假设我更改第一个输入，则 arrId 应该是数组中的第一个元素，而不是最后一个元素。但 arrId 始终是数组中的最后一个元素。

var arr = ["22", "12", "15", "6"];

for (var i = 0; i < arr.length; i++) {

  var arrId = arr[i];

  var input = document.createElement("input");
  input.value = 0;
  input.type = "number";
  input.onchange = function(x) {

    console.log(x.target.value + " " + arrId);

    if (parseInt(x.target.value) > parseInt(arrId)) {

      x.target.value = arrId;
    }
  }

  document.getElementById("inputs").appendChild(input);

}

input {
  display: block;
  margin: 10px 0;
}

<div id="inputs">

</div>

Answer 1

它始终显示 i 的最后一个值，因为 6 是最后一个值，您在更改时调用的函数将只记住其范围内的最后一个值，为了解决这个问题，您需要创建一个新的范围所以该函数会记住当前值，您可以使用 IIFE 来做到这一点.

var arr = ["22", "12", "15", "6"];

for (var i = 0; i < arr.length; i++) {

  var arrId = arr[i];

  var input = document.createElement("input");
  input.value = 0;
  input.type = "number";
  (function(i,input){
    input.onchange = function(x) {

      console.log(x.target.value + " " + i);

      if (parseInt(x.target.value) > parseInt(arrId)) {

        x.target.value = arrId;
      }
    }
  })(arrId,input);
  
  document.getElementById("inputs").appendChild(input);

}

input {
  display: block;
  margin: 10px 0;
}

<div id="inputs">

</div>

使用 ES6 的另一个解决方案是使用 let 声明变量，因为这是 block 作用域变量，因此该值仅存在于循环中。

var arr = ["22", "12", "15", "6"];

for (let i = 0; i < arr.length; i++) {

  let arrId = arr[i];

  let input = document.createElement("input");
  input.value = 0;
  input.type = "number";
    input.onchange = function(x) {

      console.log(x.target.value + " " + arrId);

      if (parseInt(x.target.value) > parseInt(arrId)) {

        x.target.value = arrId;
      }
    }
  
  document.getElementById("inputs").appendChild(input);

}

input {
  display: block;
  margin: 10px 0;
}

<div id="inputs">

</div>