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但我不知道的问题？

编辑:

嘿,这些都很棒.我已经阅读了一些关于闭包和自我调用的函数,并且(kindasorta)得到它.

到目前为止,我有这个,但点击似乎没有正确绑定.区域将以正确的值发出警报,但没有单击绑定.我仍然有区域问题,或者我只是完全脱离标记？

$(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构造.

但是你可能仍会遇到类似的问题.上帝知道我因为类似的bug而调试了多少脚本.执行以下操作可确保正确确定范围:

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