Question

我正在尝试在一个循环中绑定事件处理程序，例如：

        var tabs = ['one', 'two', 'three', 'four']

        for(var i = 0; i < tabs.length; i++) {
            alert(tabs[i]);
            var id = i;
            $('#' + tabs[i]).bind('click', function() {
               loadTabs(id, tabs);
            });
        }

只保留最后一个（值'四'）。

我正在尝试整合目前正常运行的代码：

        $('#one').click(function() {
            loadTabs(0, tabs);
        });

        $('#two').click(function() {
            loadTabs(1, tabs);
        });

        $('#three').click(function() {
            loadTabs(2, tabs);
        });

        $('#four').click(function() {
            loadTabs(3, tabs);
        });

以为我可能因this post而需要关闭。

Answer 1

你对other post中所读到的内容是正确的。您需要创建一个闭包来将参数绑定到每个单独的onclick处理程序：

$('#' + tabs[i]).bind(
    'click', 
    (function(id) {
        return function() 
        {
            loadTabs(id, tabs);
        };
    })(id)
);

您可能还想查看currying。在这个例子中，您可以创建一个小辅助函数，它将第一个参数绑定到传递的函数并返回新函数。

function curry(func, arg1)
{
    return function()
    {
        func(arg);
    };
}

然后把它放在一起：

$('#' + tabs[i]).bind(
    'click', 
    curry(function(id) { loadTabs(id); }, id)
);

请注意，我的咖喱功能与currying的定义不匹配，因为它忽略了任何其他参数。但它应该适用于你的情况。

Answer 2

由于您已经在使用jQuery，因此可以使用jQuery.each执行此任务。因此，正如您所正确假设的那样，您不需要自己做closures。

var tabs = ['one', 'two', 'three', 'four'];

$.each(tabs, function(idx, tab) {
    $("#" + tab).on("click", function() {
        alert(idx);
        //loadTabs(idx, tabs);
    })
});

jsfiddle

在循环中绑定事件处理程序需要关闭吗？

2 个答案: