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

Answer 2

这是一个JavaScript的东西;它不是jQuery相关的。你正在做的是创建一个闭包，但你不能正确理解它们是如何工作的。

您可能希望阅读http://blog.morrisjohns.com/javascript_closures_for_dummies，尤其是示例5,6和7。

Answer 3

检查“区域”变量的范围。你基本上是在分配一个全局变量，所以在最后一次迭代中，“Area”的范围是在循环之外。

Answer 4

确保在加载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);
        });
    });
}

jQuery：从数组循环设置单击

4 个答案: