Question

考虑这段代码（我正在开发的JQuery插件的一部分）：

for (var counter = 1; counter <= 3; counter++) {
    var btn = $("<a></a>").addClass(class1)
                          .addClass(class2 + counter);
    btn.click(function() {
        $.fn.myPlugin.Click(counter);
    });
    myDiv.append(btn);
 }

其中btn是<a>标记，我有CSS类（使其看起来像一个按钮）和click事件调用我的插件函数counter（1 ，2,3）作为参数，myDiv是包含我创建的3个按钮的<div>。

问题在于，我创建的所有<a>代码都会以4作为参数调用该函数，我不知道为什么。

Answer 1

可能有更好的方法来创建一个闭包，但是当我遇到这样的问题时，这就是我要做的事情。

for (var counter = 1; counter <= 3; counter++) {
    var btn = $("<a></a>").addClass(class1)
                          .addClass(class2 + counter);

    (function(b,c) {
        b.click(function() {
            $.fn.myPlugin.Click(c);
        });
    })(btn,counter);

    myDiv.append(btn);
 }

传递btn可能不是必要的，因为无论如何都会通过引用传递。

Answer 2

以下是如何在循环中处理闭包的示例。其工作原因是i必须进行评估才能创建记录其当前值的函数。您可以以类似的方式在for循环中创建自己的makeClickHandlerFunction。

var funcs = [];
for(var i = 0; i < 5; i++){
   var createFunc = function(x){
      return function(){console.log(x)};
   };
   funcs.push(createFunc(i));
}
funcs[0](); //logs 0
funcs[1](); //logs 1

Answer 3

我发现我可以用它来解决这个问题

btn.click({ arg: counter }, function(event) {
    $.fn.myPlugin.Click(event.data.arg);
});

循环的Jquery插件

3 个答案: