Javascript Object Literals和jQuery

我已經更新了腳本，以提供更好的示例。對於$ header我有一個匿名函數現在返回$（「＃header」）。雖然這個方法可行，但我確信它每次使用時都會調用$ header，所以它的效率相當於整個代碼中只使用$（「＃header」）。Javascript Object Literals和jQuery

我真正想要的是將$（「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>

來源

2010-09-02 mindwire22

「這是因爲變量在腳本解釋的時間實例化。所以在語法分析器的時間獲取到腳本中的$（」＃頭「）未在DOM還「。

來源

2010-09-07 00:20:47 mindwire22

因爲當你定義$header : $('#header')那個元素不可用？當你撥打lib.page.init這是？我不確定你什麼時候撥打lib.page.init，但我敢打賭它在$(document).ready()對不對？並且您在dom準備好之前定義對象字面值。

好的，你的div＃頭文件在你想把它分配給$頭文件的時候是不可用的，你有兩個選項，我會先給你看最好的選項。這就是我所說的'將所有腳本放在底部'！

<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-02 20:23:01 BGerrissen

如何在dom準備好後定義對象字面值？ – mindwire22 2010-09-02 21:09:44

當我在firefox中console.log（lib.page。$ header）時，我得到一個返回的jQuery對象，選擇器是#header。任何想法？ – mindwire22 2010-09-02 21:23:00

jQuery對象的存在並不能保證它被DOM元素填充。你需要檢查那個長度。此外，在標記之前將所有JavaScript移動到文檔末尾完全解決了這些問題。 – BGerrissen 2010-09-02 22:13:56

Javascript Object Literals和jQuery

回答

相關問題