1

在下面的代码中，我为 gobal 变量“myDiv”分配了一个 jQuery 元素。但是在“test()”函数内部，似乎 myDiv 变量已声明但未定义。在我可以对它做任何事情之前，我必须再次重新分配它 $('myDiv') 。

Bogus 变量 xyz 似乎可以正常访问...

<!DOCTYPE html>
<htm>
<head>
<title>Javascript Test Code</title>
<script src="js/jquery-1.9.0.min.js"></script>
<script>

var App = App || (function () {

  var myDiv = $('#myDiv'), // define a global jQuery element variable.  
        xyz = 'xyz';       // and a bogus variable as a test.  

  function test()
  {
    console.log('running test...','myDiv is', myDiv); // length is 0
    console.log('xyz is ', xyz); // says xyz

    myDiv = $('#myDiv'); // after selecting with jQuery...

    console.log('running test...','myDiv is', myDiv); //length is 1
    console.log('xyz is ', xyz); // still says xyz
  }

  return {test:test} 

}());

$(function(){

  App.test();

});

</script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
4

2 回答 2

2

由于没有渲染任何内容，因此无法访问文档头部的元素。这条线

var App = App || (function () {

将执行自执行功能，因为此时 App 未定义。

一旦运行自执行函数，它会查找，$('#myDiv')但由于元素不存在，因此不会找到（这始终是为什么匹配选择器的元素数组的长度为 0）。

稍后，当您尝试访问时，App它将已经构建。

$(function(){
 App.test();
});

这意味着调用App返回已经从自执行函数构建App的值，其值已经存储在文档头部执行时。

当您调用该函数时test，将反映已加载的状态。但是，您发出的功能较低

myDiv = $('#myDiv'); // after selecting with jQuery...

一旦页面已经加载（因为我们已经在 jquery 就绪回调中）。这将在页面上找到元素，因为 DOM 已经被渲染并更新了值。

于 2013-02-21T00:44:00.643 回答
0

在上面的特定示例代码中，初始 myDiv 为空，因为在声明 App 时，DOM 尚未完全加载，因此长度#myDiv正确为零。

您应该在 DOM 加载后移动要运行的模块，即。移动到脚本的底部。

请参阅示例 jsFiddle - 你的任务很好。http://jsfiddle.net/yWhbL/

于 2013-02-21T00:45:21.267 回答