Javascript Object Literals et jQuery

J'ai mis à jour le script ici pour donner un meilleur exemple. Pour $ header J'ai une fonction anonyme qui retourne maintenant $ ("# header"). Bien que cela fonctionne, je suis sûr que ce n'est pas efficace car il appelle $ header chaque fois qu'il est utilisé - donc c'est la même chose que d'utiliser $ ("# header") dans tout le code.Javascript Object Literals et jQuery

Ce que je veux vraiment est de stocker $ ("header") dans une variable. Lorsque j'essaye de le faire avec $ header2 (ci-dessous), il échoue. #header est rouge et non bleu.

Lorsque j'utilise Firebug à la sortie lib.page. Header2.selector $ est affiche correctement #header. Comme vous pouvez le voir, le script qui appelle lib.page.init se trouve en bas du DOM.

Des idées?

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

Source

2010-09-02 mindwire22

« Cela se produit parce que les variables sont instanciées au moment où le script est interprété. Ainsi, au moment de l'analyseur obtient au script le $ (» en-tête # ") n'est pas dans le encore DOM "

Source

2010-09-07 00:20:47 mindwire22

Parce que lorsque vous définissez $header : $('#header') cet élément n'est pas disponible? et quand vous appelez lib.page.init c'est? Je ne suis pas sûr quand vous appelez lib.page.init, mais je parie que c'est dans $(document).ready() non? Et vous définissez l'objet littéral avant que le dom soit prêt.

Ok, votre en-tête div # n'est pas disponible au moment où vous voulez l'assigner à l'en-tête $, vous avez deux options et je vais d'abord vous montrer la meilleure option. C'est ce que je voulais dire par «mettre tous les scripts en bas»!

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

Une autre option si vous souhaitez conserver des scripts dans l'en-tête, est d'assigner $ header dans votre appel onDomReady.

<script> 
    // create lib etc here 

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

Source

2010-09-02 20:23:01 BGerrissen

Comment est-ce que je peux définir le littéral d'objet après que le dom est prêt? – mindwire22

Lorsque je console.log (lib.page. $ Header) dans firefox, j'obtiens un objet jQuery retourné et le sélecteur est #header. Des idées? – mindwire22

La présence de l'objet jQuery ne garantit pas qu'il est rempli avec des éléments DOM. Vous devez vérifier la longueur sur cela. En outre, déplacer tout votre javascript à la fin du document avant que la balise résout ce genre de problèmes entièrement. – BGerrissen

Javascript Object Literals et jQuery

Répondre

Questions connexes