1

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

2 回答 2

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>
于 2010-09-02T20:23:01.580 回答
1

“发生这种情况是因为变量在解释脚本时被实例化。所以在解析器获取脚本时，$("#header") 还没有在 DOM 中。”

于 2010-09-07T00:20:47.930 回答