Question

我对此代码有疑问。它应该（并且确实）显示项目列表，您可以通过单击加号和减号来添加和删除条目。

<html><head><script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");

app={};
app.attachList = function() {        
        return {
            _current_id : 0,
            addFilterAfter : function(after_entry_id) {
                that = this;
                new_id = this._newId();
                jQuery("#entry_"+after_entry_id).after("<li id=\"entry_"
                                +new_id+"\"><a href=\"javascript:void(0);\" id=\"entry_"
                                +new_id+"_add\">(+)</a><a href=\"javascript:void(0);\">(-)</a> hello "
                                +new_id+"</li>"); 
                jQuery("#entry_"+new_id+"_add")
                      .bind("click", function() { 
                                     that.addFilterAfter(new_id); 
                                    }  
                           );
            },  
            show : function() {
                that = this;
                new_id = this._newId();
                jQuery("#list").children().remove();
                jQuery("#list").append("<li id=\"entry_"
                         +new_id+"\"><a href=\"javascript:void(0);\" id=\"entry_"
                         +new_id+"_add\">(+)</a> hello </li>");
                jQuery("#entry_"+new_id+"_add")
                         .bind("click", function() { 
                             alert(new_id); // HERE
                             that.addFilterAfter(new_id); 
                             }
                         );
            },  
            _newId : function() {
                this._current_id++;
                return this._current_id;
            },
        };
}       

app.main = function() { l = app.attachList(); l.show(); }
google.setOnLoadCallback(function() {  jQuery.noConflict(); jQuery(document).ready(app.main); });  
</script>
<ul id="list" /></ul>
</head>
</html>

我的问题与此处标记的行有关。理想情况下，如果我单击第一个项目+，我希望此代码继续添加到第一个项目下方。这不会发生。它会继续递增new_id（正如您从警报中看到的那样），而不是保留已授予的原始new_id。

现在，我怀疑发生了什么，主要涉及javascript的封闭性质，但我希望从更熟练的人那里听到它的解释。

作为旁注，如果我在一个单独的方法中对事件进行绑定的逻辑进行分区，它就会按预期工作......从我怀疑这个。

Answer 1

在您的代码中导致此行为的问题是，当您为new_id分配值时，您错过了var语句。

在JavaScript中，当您对未声明的标识符（范围链中无法访问的标识符）进行分配时，它将变为全局（window.new_id已创建），这就是它继续递增的原因。

Answer 2

这只是一个快速响应，但我想知道你正在使用的new_id变量的范围。

Javascript：代码出乎意料地行为

2 个答案: