Question

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

Answer 1

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

Answer 2

“这是因为在解释脚本时实例化了变量。所以在解析器到达脚本时，$（“＃header”）还没有在DOM中。“

Javascript对象文字和jQuery

2 个答案: