参见:
for (var i in this.items) {
var item = this.items[i];
$("#showcasenav").append("<li id=\"showcasebutton_"+item.id+"\"><img src=\"/images/showcase/icon-"+item.id+".png\" /></li>");
$("#showcasebutton_"+item.id).click(function() {
alert(item.id);
self.switchto(item.id);
});
}
问题是提醒的 item.id 始终是数组中最后一项 (this.items) 的 ID。如何解决?
这里的问题是变量 item
随每个循环而变化。当您稍后引用 item
时,将使用它保存的最后一个值。您可以使用一种称为 closure 的技术(本质上是一个返回函数的函数)以不同方式快速确定变量的范围。
for (var i in this.items) {
var item = this.items[i];
$("#showcasenav").append("<li id=\"showcasebutton_"+item.id+"\"><img src=\"/images/showcase/icon-"+item.id+".png\" /></li>");
$("#showcasebutton_"+item.id).click(
// create an anonymous function that will scope "item"
(function(item) {
// that returns our function
return function() {
alert(item.id);
self.switchto(item.id);
};
})(item) // immediately call it with "item"
);
}
旁注 - 我看到您这里有 jQuery。它有一个辅助函数 $.each()
可以与数组一起使用,并且可以作为简单的 for/each 循环的快捷方式。由于作用域在此调用中的工作方式 - 您不需要使用闭包,因为“item”在调用时已经是函数的参数,而不是存储在父函数的 var
中范围,就像在您的示例中一样。
$.each(this.items,function(i, item) {
$("#showcasenav").append("<li id=\"showcasebutton_"+item.id+"\"><img src=\"/images/showcase/icon-"+item.id+".png\" /></li>");
$("#showcasebutton_"+item.id).click(function() {
alert(item.id);
self.switchto(item.id);
});
});