javascript - jQuery:设置点击数组循环

Question

我有一系列标题/正文模式的 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”。

这看起来应该很简单。我是否遗漏了一些明显的东西，或者将字符串传递给 jQuery 时是否存在我不知道的问题？

编辑:

嘿，这些都很棒。我已经阅读了一些关于闭包和自调用函数的内容，并且(有点)明白了。

到目前为止，我有这个，但点击似乎没有正确绑定(bind)。区域将以正确的值发出警报，但不会单击绑定(bind)。我是否仍然遇到 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]);
    }
});

Answer 1

是的，我经常遇到这个问题。 Area 是一个全局变量，因为它前面没有 var。另外，不要使用 for...in 结构。

但您可能仍会遇到类似的问题。天知道我因为类似的错误调试了多少脚本。执行以下操作可确保适当的范围界定:

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]);
}