Javascript 对象文字和 jQuery

发布于 2024-09-17 12:08:01 字数 1187 浏览 4 评论 0原文

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

原文

I've updated the script here to give a better example. For $header I've got an anonymous function now returning $("#header"). Although this works I'm sure its not efficient as it calls $header every time it's used - so its the same as just using $("#header") throughout the code.

What I really want is to store $("header") in a variable. When I try to do this with $header2 (below) it fails. #header is red not blue.

When I use firebug to output lib.page.$header2.selector is correctly displays #header. As you can see the script which calls lib.page.init is at the bottom of the DOM.

Any ideas?

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

万水千山粽是情ミ 2024-09-24 12:08:27

“发生这种情况是因为变量是在解释脚本时实例化的。
因此，当解析器到达脚本时，$("#header") 还不在 DOM 中。”

回复收藏 0 原文

謌踐踏愛綪 2024-09-24 12:08:20

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

Because when you define $header : $('#header') that element is not available? and when you call lib.page.init it is? I am not sure when you call lib.page.init, but I bet it's in $(document).ready() right? And you define the object literal before the dom is ready.

Ok, your div#header is not available by the time you want to assign it to $header, you have two options and I will show you the best option first. It's what I meant with 'put all scripts at the bottom'!

<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>

Another option if you want to keep scripts in the header, is to assign $header in your onDomReady call.

<script>
    // create lib etc here

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

回复收藏 0 原文

~没有更多了~