看到:
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始终是数组中最后一个项目的ID(this.items)。怎么解决?
这里的问题是变量item随每个循环而变化。item在以后参考时,将使用其保留的最后一个值。您可以使用一种称为闭包的技术(本质上是一个返回函数的函数)来快速确定变量的范围。
item
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()
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); }); });