循环创建的jQuery事件处理程序 [英] jQuery Event Handler created in loop

问题描述

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

So I have a group of events like this:

$('#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);
});

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

And I wanted to run them through a loop I am already running something like this:

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

从理论上说这应该有用，但似乎一旦我加载文件...它没有响应任何特定的div id，就像它应该点击一样...它会逐步通过每个div，无论我点击哪一个。我想动态创建更多的事件监听器，但我首先需要这些......

In theory that should work, but it doesnt seem to once I load the document... It doesnt respond to any specific div id like it should when clicked... it progresses through each div regardless of which one I click. There are more event listeners I want to dynamically create on the fly but I need these first...

我缺少什么？

推荐答案

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

This is a very common issue people encounter.

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

JavaScript doesn't have block scope, just function scope. So each function you create in the loop is being created in the same variable environment, and as such they're all referencing the same i variable.

要在新变量环境中调整变量的范围，您需要调用一个函数，该函数具有一个引用它的变量（或函数参数）你希望保留的价值。

To scope a variable in a new variable environment, you need to invoke a function that has a variable (or function parameter) that references the value you want to retain.

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

In the code below, we reference it with the function parameter 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（） 返回一个函数它引用了函数中的局部变量（名为 j ，但你可以将它命名为 i 以及）。

Here we invoked the generate_handler() function, passed in i, and had generate_handler() return a function that references the local variable (named j in the function, though you could name it i as well).

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

The variable environment of the returned function will exist as long as the function exists, so it will continue to have reference to any variables that existed in the environment when/where it was created.

更新：已添加之前 i 以确保它被正确声明。

UPDATE: Added var before i to be sure it is declared properly.

这篇关于循环创建的jQuery事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！