Javascript For循环索引返回“[object Object] - undefined”

Question

我正在尝试将一个函数运行到许多元素，所以我正在使用for循环。 我不明白为什么我没有得到任何价值观。

    var i;
var aFields = ["#business1A","#business1B","#business1C","#business1D","#business2A","#business2B","#business2C","#business2D",
                "#business3A","#business3B","#business3C","#business3D","#business4A","#business4B","#business4C","#business4D",
                "#business5A","#business5B","#business5C","#business5D","#business6A","#business6B","#business6C","#business6D"];
for (i = 0; i < aFields.length; i++) {
    $(aFields[i]).keyup(function(){
        alert($(aFields[i]+'Warning') + " - " +$(aFields[i]).val());
    });
}

Answer 1

那是因为你在事件处理程序的回调函数中使用变量i 。 事件在循环结束时发生，因此变量包含的索引超出了数组中的最后一项。

要使用绑定事件的迭代中的变量值，可以使用立即执行的函数表达式通过创建范围为每次迭代创建变量：

var i;
var aFields = ["#business1A","#business1B","#business1C","#business1D","#business2A","#business2B","#business2C","#business2D",
                "#business3A","#business3B","#business3C","#business3D","#business4A","#business4B","#business4C","#business4D",
                "#business5A","#business5B","#business5C","#business5D","#business6A","#business6B","#business6C","#business6D"];
for (i = 0; i < aFields.length; i++) {
  (function(j){
    $(aFields[j]).keyup(function(){
        alert($(aFields[j]+'Warning') + " - " +$(aFields[j]).val());
    });
  })(i);
}

Answer 2

尝试这个：

var i;
var aFields = ["#business1A","#business1B","#business1C","#business1D","#business2A","#business2B","#business2C","#business2D",
                "#business3A","#business3B","#business3C","#business3D","#business4A","#business4B","#business4C","#business4D",
                "#business5A","#business5B","#business5C","#business5D","#business6A","#business6B","#business6C","#business6D"];
for (i = 0; i < aFields.length; i++) {
  (function(j){
    $(aFields[j]).keyup(function(){
        alert(($(this).attr('id')+'Warning') + " - " +$(this).val());
    });
  })(i);
}

Answer 3

这里的问题是闭包变量 i的错误用法 ，变量在所有键盘处理程序之间共享，所以当循环结束时， i将得到值aFields.length因此aFields[i]将返回undefined。

尝试

var aFields = ["#business1A", "#business1B", "#business1C", "#business1D", "#business2A", "#business2B", "#business2C", "#business2D",
    "#business3A", "#business3B", "#business3C", "#business3D", "#business4A", "#business4B", "#business4C", "#business4D",
    "#business5A", "#business5B", "#business5C", "#business5D", "#business6A", "#business6B", "#business6C", "#business6D"];

$.each(aFields, function (i, val) {
    $(val).keyup(function () {
        alert($(val + 'Warning') + " - " + $(val).val());
    });
})

Answer 4

其他答案是关于闭包如何工作的很好的解释，但最干净的解决方案是使用this来引用所选对象：

var i;
var aFields = ["#business1A","#business1B","#business1C","#business1D","#business2A","#business2B","#business2C","#business2D",
            "#business3A","#business3B","#business3C","#business3D","#business4A","#business4B","#business4C","#business4D",
            "#business5A","#business5B","#business5C","#business5D","#business6A","#business6B","#business6C","#business6D"];
for (i = 0; i < aFields.length; i++) {
    $(aFields[i]).keyup(function(){
        alert(this.id + ' Warning - ' + this.value);
    });
}