我在这里更新了脚本以提供更好的示例。对于 $ header 我有一个匿名函数现在返回 $(“#header”)。虽然这有效,但我确信它没有效率,因为它每次使用时都会调用$ header - 所以它与在代码中使用 $(“#header”)相同。
我真正想要的是将 $(“header”)存储在变量中。当我尝试使用$ header2(下面)执行此操作时,它会失败。 #header是红色而不是蓝色。
当我使用firebug输出 lib.page。$ header2.selector 时,会正确显示 #header 。正如您所看到的,调用lib.page.init的脚本位于DOM的底部。
有什么想法吗?
<script type="text/javascript">
var lib = {
page : {
$header : function() { return $("#header")},
$header2 : $("#header"),
init: function() {
lib.page.$header().css("background","red");
lib.page.$header2.css("background","blue");
console.log(lib.page.$header2.selector);
}
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<em>Example!</em>
</div>
</div>
<script type="text/javascript">
$(function() { lib.page.init(); });
</script>
</body>
答案 0 :(得分:2)
因为当您定义$header : $('#header')
该元素不可用时?当你拨打lib.page.init
时,它是?我不确定你何时致电lib.page.init
,但我打赌它在$(document).ready()
正确?并且在dom准备好之前定义对象文字。
好的,当您想要将它分配给$ header时,您的div#header不可用,您有两个选项,我将首先向您展示最佳选项。这就是我将'把所有脚本放在底部'的意思!
<head>
<!-- dont put scripts here if you can avoid it, it's bad! -->
</head>
<body>
<div id="wrapper">
<div id="header">
<em>Example!</em>
</div>
</div>
<!-- keep scripts at the end of the page just before the </body> tag -->
<script type="text/javascript">
var lib = {
page : {
// div#header is available
$header : $("#header"),
init: function() {
lib.page.$header().css("background","red");
}
}
}
// you don't need onDomReady anymore.
lib.page.init();
</script>
</body>
如果你想在标题中保留脚本,另一个选择是在你的onDomReady调用中分配$ header。
<script>
// create lib etc here
$(function(){ // this is an onDomReady call in jQuery
lib.page.$header = $('#header');
lib.page.init();
});
</script>
答案 1 :(得分:1)
“这是因为在解释脚本时实例化了变量。 所以在解析器到达脚本时,$(“#header”)还没有在DOM中。“