gpt4 book ai didi

Javascript 对象文字和 jQuery

转载 作者:行者123 更新时间:2023-11-30 13:38:20 26 4
gpt4 key购买 nike

我已经更新了此处的脚本以提供更好的示例。对于 $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>

最佳答案

因为当您定义 $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>

如果您想在 header 中保留脚本,另一种选择是在您的 onDomReady 调用中分配 $header。

<script>
// create lib etc here

$(function(){ // this is an onDomReady call in jQuery
lib.page.$header = $('#header');
lib.page.init();
});
</script>

关于Javascript 对象文字和 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3630889/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com