Javascript 如何在整个循环中正确引用对象？

看

当我在数组中循环时，当我在循环中绑定回调时，如何引用数组的正确元素

var items = ["a", "b", "c"];
for(var i in items) {
    var this_item = items[i];
    var new_li = $('<li>'+this_item+'</li>');
    new_li.bind('click', function() {
        alert(this_item); // this always alerts "c"
    });
    $('.container').append(new_li);
}

var项目=[“a”、“b”、“c”]；
对于（项目中的var i）{
var this_item=items[i]；
var new_li=$（“
”+此项+”
）；
新建绑定（'click'，function（））{
警报（此_项）；//此项始终警报“c”
});
$（'.container'）。追加（新的）；
}

您需要在该变量上创建一个闭包：

var createCallback;

createCallback = function(item) {
  return function() {
    alert(item);
  };
};
for(var i in items) {
    var this_item = items[i];
    var new_li = $('<li>'+this_item+'</li>');
    new_li.bind('click', createCallback(this_item));
    $('.container').append(new_li);
}

var-createCallback；
createCallback=函数（项）{
返回函数（）{
警报（项目）；
};
};
对于（项目中的var i）{
var this_item=items[i]；
var new_li=$（“
”+此项+”
）；
新建绑定（'click'，createCallback（此项））；
$（'.container'）。追加（新的）；
}

请记住，绑定函数在循环结束后调用，因此此_项的值是它最后设置的值。Javascript不会为每个循环迭代创建一个新的作用域，所以如果您想定义回调，您必须自己创建一个。在JS中创建作用域的唯一方法是通过函数。因此，我编写了一个函数，将该值绑定为参数，并返回一个新函数，该函数现在将“记住”正确的值。

尝试在jQuery中使用.data（）方法

var items = ["a", "b", "c"];
for(var i in items) {
    var this_item = items[i];
    var new_li = $('<li>'+this_item+'</li>');
    new_li.data("item", this_item).bind('click', function() {
        alert($(this).data("item"));
    });
    $('.container').append(new_li);
}

var项目=[“a”、“b”、“c”]；
对于（项目中的var i）{
var this_item=items[i]；
var new_li=$（“
”+此项+”
）；
新建.数据（“项”，此项）.bind（'click'，function（））{
警报（$（此）.data（“项”））；
});
$（'.container'）。追加（新的）；
}

问题是您将所有元素“单击”绑定到同一个变量。由于每次迭代数组中的某个值时都定义了这个变量，所以单击始终会返回分配给该变量的最后一个值（c）

这里有一个获取实际“值”的解决方案，因为您在列表项中设置了它，您只需获取实际对象并返回.text（）

var项目=[“a”、“b”、“c”]；
对于（项目中的var i）{
var this_item=items[i]，
新项目=$（“
”+此项目+”
）；
新建绑定（'click'，function（））{
警报（$（this.text（））；
//警报（此_项）；//此项始终警报“c”
});
$（'.container'）。追加（新的）；
}

这是一个范围问题。这篇博文将帮助你解决问题。不要在数组中使用

。这真是一种糟糕的做法。
var items = ["a", "b", "c"];
for(var i in items) {
    var this_item = items[i],
        new_li = $('<li>'+this_item+'</li>');
    new_li.bind('click', function() {
        alert($(this).text());

        //alert(this_item); // this always alerts "c"
    });
    $('.container').append(new_li);
}