javascript - 对 jQuery 插件的操作始终是最后的选择？

Question

我正在编写的插件是内部应用程序的右键单击上下文菜单，我不明白为什么会发生这种情况。

这是我的测试代码:

$('.item').rightClickMenu([
{
  icon:'http://cdn1.iconfinder.com/data/icons/silk2/exclamation.png',
  title:'Alert',
  action:function(){
    alert('Here is an example alert!');
  }
},
{
  icon:'http://cdn1.iconfinder.com/data/icons/silk2/error.png',
  title:'Console.Log',
  action:function(){
    console.log('Here is an example console.log()!');
  }
}
]);

相关的jQuery插件代码是:

for(x in items){
          $list.append('<li class="rightClickMenuOption'+x+'"><img src="'+items[x].icon+'">'+items[x].title+'</li>')
            .find('.rightClickMenuOption'+x)
              .bind('click',function(){
                items[x].action();
              });
        }

演示: http://jsbin.com/uxali4/3/

Answer 1

这将修复它:http://jsbin.com/uxali4/4/edit

您正在创建一个闭包。 for..in 循环中调用的所有方法都会将相同的父上下文从其 [[Scope]] 属性复制到内部 [[Scope]] 属性中。 strong>激活对象。因此，所有方法都访问相同的变量x。您需要调用另一个函数来解决此问题。

for(x in items){
      (function(index) {
        $list.append('<li class="rightClickMenuOption'+index+'"><img src="'+items[index].icon+'">'+items[index].title+'</li>')
          .find('.rightClickMenuOption'+index)
            .bind('click',function(){
              items[index].action();
            });
      }(x));
}

更新

看看http://jsperf.com/for-in-vs-for

这应该非常令人印象深刻地展示了 for 和 for..in 之间的速度差异