提问人：Eli 提问时间：1/30/2009 最后编辑：Eli 更新时间：2/9/2011 访问量：10776
jQuery：从数组循环设置点击
jQuery: Set click from array loop
问：
我有一系列标题/正文模式的 div，单击标题将显示有问题的正文。
这一切都发生在 .click 初始化的页面上准备好......
而不是这样做（这很好用，但很痛苦）：
$('#show_fold_ping').click(function(){ ShowArea('#fold_ping') });
$('#show_fold_http').click(function(){ ShowArea('#fold_http') });
$('#show_fold_smtp').click(function(){ ShowArea('#fold_smtp') });
$('#show_fold_pop3').click(function(){ ShowArea('#fold_pop3') });
...
我正在尝试这样做：
var Areas = ['ping','http', 'smtp', 'pop3'];
for( var i in Areas ){
Area = '#show_fold_'+Areas[i];
$(Area).click(function(){ alert(Area); /* ShowArea(Area); */ });
}
我遇到的问题是它们似乎都初始化为最后一个。IE：如果 pop3 是最后一个，点击 #show_fold_[any] 将提醒“#show_fold_pop3”。
这似乎应该非常简单。我是否遗漏了一些明显的东西，或者将字符串传递给我不知道的字符串是否存在问题？
编辑：
嘿，这些都很棒。我已经阅读了一些关于闭包和自调用函数的信息，并且（有点）明白了。
到目前为止，我有这个，但点击似乎没有正确绑定。区域将以正确的值发出警报，但没有点击绑定。我是否仍然遇到 Area 的范围问题，或者我只是完全偏离了目标？
$(function(){
Areas = ['ping','http', 'smtp', 'pop3', 'imap', 'ftp', 'dns', 'tcp', 'database', 'seo'];
for( var i = 0; i < Areas.length; i++ ){
(function (Area) {
alert(Area);
$("#show_fold_"+Area).click(function(){ alert('x'); });
})(Areas[i]);
}
});
答：
2赞
typeoneerror
1/30/2009
#1
检查“Area”变量的作用域。您基本上是在分配一个全局变量，因此在最后一次迭代中，“Area”的范围在循环之外。
3赞
Sophie Alpert
1/30/2009
#2
这是一个 JavaScript 的东西;它与jQuery无关。你正在做的是创建一个闭包，但你没有正确理解它们是如何工作的。
您可能需要阅读 http://blog.morrisjohns.com/javascript_closures_for_dummies，尤其是示例 5、6 和 7。
1赞
user434917
1/30/2009
#3
确保在加载 DOM 后添加了 click 事件处理 您可以在 head 元素中包含以下内容：
var Areas = ['ping','http', 'smtp', 'pop3'];
$(document).ready(function() {
$.each(Areas, function(i, v){
var Area = '#show_fold_' + v;
$(Area).click(function() {
alert(Area);
});
});
}
评论
0赞
geowa4
1/30/2009
您可能需要编辑该脚本。var 面积 in 面积 和 面积 = ... + 面积[i]？
12赞
geowa4
1/30/2009
#4
是的，我经常遇到这个问题。 是一个全局变量，因为它之前没有。另外，不要使用 for...在构造中。Areavar
但是您可能仍然会遇到类似的问题。天知道我因为类似的错误而调试了多少脚本。执行以下操作可确保正确的范围：
var Areas = ['ping','http', 'smtp', 'pop3'];
for( var i = 0; i < Areas.length; i++ ){
(function(area) {
$(area).click(function(){ alert(area); /* ShowArea(area); */ });
})(Areas[i]);
}
评论