Javascript对象文字和jQuery

时间:2010-09-02 20:18:25

标签: javascript jquery object-literal

我在这里更新了脚本以提供更好的示例。对于 $ 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>

2 个答案:

答案 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中。“