在循环中创建的 jQuery 事件处理程序

所以我有一组这样的事件：

$('#slider-1').click(function(event){   
        switchBanners(1, true);
});
$('#slider-2').click(function(event){   
        switchBanners(2, true);
});
$('#slider-3').click(function(event){   
        switchBanners(3, true);
});
$('#slider-4').click(function(event){   
        switchBanners(4, true);
});
$('#slider-5').click(function(event){   
        switchBanners(5, true);
});

我想通过一个循环运行它们，我已经在运行这样的东西：

for(i = 1; i <= totalBanners; i++){
    $('#slider-' + i).click(function(event){    
            switchBanners(i, true);
    });
}   

理论上应该可行，但一旦我加载文档，它似乎就不起作用了...它不会像单击时那样响应任何特定的 div id...无论我单击哪一个，它都会在每个 div 中进行。我想动态创建更多事件监听器，但我首先需要这些......

我缺少什么？

这是人们遇到的一个非常常见的问题。

JavaScript 没有块作用域，只有函数作用域。因此，您在循环中创建的每个函数都在相同的变量环境，因此它们都引用相同的i多变的。

要在新的变量环境中作用域变量，您需要调用具有变量的函数（或函数参数）引用您要保留的值。

在下面的代码中，我们通过函数参数引用它j.

   // Invoke generate_handler() during the loop. It will return a function that
   //                                          has access to its vars/params. 
function generate_handler( j ) {
    return function(event) { 
        switchBanners(j, true);
    };
}
for(var i = 1; i <= totalBanners; i++){
   $('#slider-' + i).click( generate_handler( i ) );
}

这里我们调用了generate_handler()函数，传入i，并且有generate_handler() 返回一个函数引用局部变量(named j在函数中，尽管你可以命名它i以及）.

只要函数存在，返回函数的变量环境就会存在，因此它将继续引用创建它时/所在环境中存在的任何变量。

UPDATE: Added var before i以确保其声明正确。