如何使用jquery将变量参数传递给匿名函数?

时间:2011-04-04 14:54:28

标签: javascript jquery closures

有人能告诉我这里做错了什么吗?我在下面简化了它,但我基本上是在尝试创建一个列表,并且有一个click事件,它引用了一个仅在循环中可用的变量。

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

3 个答案:

答案 0 :(得分:14)

你没有调用外部函数。

$('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 :(得分: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);      
}

答案 2 :(得分:0)

使用&#39; bind&#39;附加点击&#39;事件并传递参数。使用&#39; event.data&#39;您将能够获得正确的参数值:

示例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);
                }
            );
        }
    }
});