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の準備が整う前にオブジェクトリテラルを定義します。

さて、あなたのdiv＃headerは、$ headerに割り当てたいときには利用できません。2つのオプションがあり、最初に最適なオプションを示します。それは私が「すべてのスクリプトを一番下に置く」という意味です！

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

スクリプトをヘッダーに保持する場合のもう1つのオプションは、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 に答える