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]]属性中。因此，所有方法都访问相同的变量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

之间的速度差异非常令人印象深刻

对jQuery插件的操作总是最后的选择？

1 个答案: