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