如何使用 jquery 将可变参数传递给匿名函数？答案

【问题标题】：How can I pass a variable parameter to an anonymous function using jquery?如何使用 jquery 将可变参数传递给匿名函数？
【发布时间】：2011-07-29 06:10:36
【问题描述】：

谁能告诉我我在这里做错了什么？我在下面对其进行了简化，但我基本上是在尝试创建一个列表并有一个单击事件来引用仅在循环中可用的变量。

for (var i = 0; i < data.length; i++) {                                                                           
  $newRow = $(rowFormat);                    
  $('a:first', $newRow).click(function(i){
    return function() { alert(i); } 
  });
  $list.append($newRow);      
}

【问题讨论】：

你做的“错误”的事情叫做闭包。您为每个 click 函数提供了对同一变量 i 的引用。
@ITroubs：他清楚地知道这一点并试图解决它（事实上，他没有给他们中的任何引用 i 在循环；他将它隐藏在 [外部] 匿名函数的参数列表中）。他只是忘记了一些括号——见大卫的回答。 :-)
是的，你是对的。没有正确阅读代码;-)
是的，变量名选择错误...

标签： javascript jquery closures

【解决方案1】：

使用 'bind' 来附加 'click' 事件并传递一个参数。使用“event.data”，您将能够获得正确的参数值：

示例 1：

 $(document).ready(function()
 {
    for (var i = 0; i < data.length; i++) 
    {                                                                           
        $newRow = $(rowFormat);                    
        $('a:first', $newRow).bind('click', {i: i},
            function (event)
            {
                alert(event.data.i);
            }
        );
        $list.append($newRow);      
    }
});

示例 2：

$(document).ready(function()
{
    $(".selectorA").each(function()
    {
        var elementId = $(this).attr("id");

        for(var i = 0; i < 20; i++) 
        {
            $('#question' + i).bind('click', {currentIndex: i, elementId: elementId}, 
                function (event)
                {
                   alert(event.data.currentIndex + " | " + event.data.elementId);
                }
            );
        }
    }
});

【讨论】：

【解决方案2】：

你没有调用外部函数。

$('a:first', $newRow).click(function(j){
  return function() { alert(j); } 
}(i)); /* Pay special attention to this line, it is where the major change is */

作为 T.J.克劳德提到，您可以将工厂移出循环。

function my_factory(j) {
    return function() { 
        alert(j); 
    }; 
}

$('a:first', $newRow).click(my_factory(i));

【讨论】：

通过在点击时调用您自己的参数，您会丢失传入的事件参数。
+1 @Mike：不过，建议您将工厂功能移出循环；您不必要地创建了一堆额外的工厂函数，而您只需要一个（为click 创建各种函数）。还建议查看事件委托，而不是为每一行创建单独的事件处理程序。
@Eli：这不是代码的作用。接受j 的函数不是click 处理程序，它构建并返回 click 处理程序。 click 处理程序是调用 alert 的函数。
它可以修改为return function(e) { alert(j); }，但是因为一开始并没有对事件对象做任何事情……
正是我需要的。如果其他人遇到这个问题，我使用这个网站来更好地理解闭包和函数工厂：developer.mozilla.org/en/JavaScript/Guide/Closures

【解决方案3】：

你几乎得到它，只是一个小的变化。这实际上是我最喜欢的在 Javascript 中实际使用闭包的示例。

基本上，您需要创建一个接受一个值的函数，并返回一个使用该值的函数。有关您的示例缺少的内容，请参阅下面的注释行。您的代码创建了匿名函数，但没有调用它。

for (var i = 0; i < data.length; i++) {                                                                           
  $newRow = $(rowFormat);
  var fn = (function (value) {
    return function() {
      alert(value);
    };
  }) (i); //this is what you were missing, you need to invoke the anonymous function
  $('a:first', $newRow).click(fn);
  $list.append($newRow);      
}

【讨论】：