jQuery:从数组循环中设置点击

我在header/body模式中有一系列div,点击header将显示有问题的body。

这一切都发生在页面准备就绪时点击初始化。..

与其这样做(这很好,但很痛苦):

$('#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)明白了。

到目前为止,我有这个,但点击似乎没有正确绑定。Area将用正确的值发出警报,但没有点击绑定。我仍然对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]);
    }
});