Question

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

有没有可能使它正确？如果我想改变第一个输入，arrId应该是数组中的第一个元素，而不是最后一个元素。但arrId始终是数组中的最后一个元素。

＆＃13;

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);

}

＆＃13;

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

＆＃13;

<div id="inputs">

</div>

＆＃13;

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声明变量，因为这是块作用域变量，该值仅存在于循环中。

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>

Answer 2

重要说明：JavaScript没有块范围。使用块引入的变量的范围限定为包含函数或脚本，并且设置它们的效果将持续超出块本身。换句话说，块语句不引入范围。虽然“独立”块是有效的语法，但您不希望在JavaScript中使用独立块，因为如果您认为它们在C或Java中执行类似此类块的操作，则它们不会按照您的想法执行操作。

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

var input = document.createElement("input");
input.value = 0;
 input.type = "number";

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

    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;
      }

})(arr[i],input)
}

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

}

在循环中创建Onchange函数

2 个答案: