Impostazione di una funzione di inizializzazione in jQuery

Solo una breve domanda qui, volevo scoprire come potrei configurarli in una funzione init() quindi far funzionare la funzione su document.ready. Questo codice viene utilizzato in un file main.js separato. Ha bisogno di essere chiamato dalla pagina indice?Impostazione di una funzione di inizializzazione in jQuery

$('#main_right_line_one').click(function(){ 
    $('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){ 
     $('#main_light_layover').fadeIn('slow'); 
    }); 
}); 

$('#main_right_line_two').click(function(){  
    $('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){ 
     $('#main_regular_layover').fadeIn('slow'); 
    }); 
}); 

$('#main_right_line_three').click(function(){ 
    $('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){ 
     $('#main_deep_layover').fadeIn('slow'); 
    }); 
});

Qualsiasi aiuto è apprezzato. Sto davvero cercando di capirlo, ma non riesco a trovare alcun buon tutorial che spieghi init() abbastanza bene per il mio codice specifico.

fonte

2013-07-30 user2635811

http://api.jquery.com/ready/ –

Così dovrei usare get() per recuperare i div? Non sono sicuro di cosa caricare esattamente prima di inizializzarlo. – user2635811

$ ("# main_right_line_one") è il selettore per ottenere il div (come oggetto jq). Quindi, quel div deve essere già presente nel tuo codice HTML. pertanto, vorrai eseguirlo nell'iniz. – FlavorScape

Nessuna necessità di "chiamate" speciali, includerlo nella pagina con <script src="yourfile.js"></script> e semplicemente avvolgere il codice come di seguito per assicurarsi che venga eseguito dopo che il dom è pronto (e gli elementi presenti).

$(function() { 
    // your code goes here 

});

$(a_function) è l'abbreviazione di $(document).ready(a_function); altro su ready handlers in the documentation.

Il motivo $(document).ready(...)/$(...) è necessaria a tutti è quella selezione jquery come $('#main_right_line_one') vede solo gli elementi presenti al momento dell'esecuzione nell'albero DOM. Tuttavia, i contenuti dei tag <script> vengono generalmente eseguiti dai browser non appena vengono soddisfatti; e gli elementi <script> si trovano in genere in <head>. Quindi gli script vedrebbero spesso un albero DOM incompleto. Ora, grazie al design di jQuery, anche se $('#main_right_line_one') non corrisponde ad alcun elemento, non ci sarebbe ancora alcun errore; e il gestore click sarebbe associato a 0 elementi.

Tutto questo può essere evitato avvolgendo questo tipo di codice nel $(function() { ... }), che assicura che qualsiasi codice è in esso verrà eseguito dopo il DOM è stato completamente inizializzato (o immediatamente se già è stata inizializzata).

Il motivo per cui v'è una scorciatoia come $(function() {}) per $(document).ready(function() {}) è che l'esecuzione del codice solo dopo che l'albero del DOM è stato finito è un modello come necessario che quasi ogni singola pagina utilizzando jQuery sarebbe utilizzando.

fonte

2013-07-30 21:04:03

e, per essere chiari, quanto sopra è uguale a '$ (document) .ready (function() {' '// il tuo codice va qui ''}); '. –

Quindi sembra abbastanza semplice da configurare, cosa che ho fatto, ma il commento sopra "Questo codice verrà eseguito automaticamente. Tieni presente tuttavia che questi elementi specificati dai selettori devono esistere nel DOM prima di poter allegare questi eventi a loro." mi sta confondendo.JQeury non modifica elementi già caricati nella pagina? Devo fare qualcosa in più in jquery per far sì che riconosca i div sulla mia pagina da usare con onclick e fadein/out? – user2635811

EDIT - Nvm, la pagina ora funziona! Grazie mille! – user2635811

Nella vostra pagina di indice:

<html> 
<head> 
    <title>Your title</title> 
</head> 
<body> 

    <!-- Your HTML here --> 

    <script src="http://code.jquery.com/jquery-2.0.0.js"></script> 
    <script src="main.js"></script> 
</body>

Hai ragione nel senso che è buona pratica per avvolgere tutto il codice in un oggetto e chiamare quella con funzione init(). Così in voi main.js, si potrebbe avere:

$(document).ready(function() { 

    myPage.init(); 

});

E poi di seguito che, si può definire la pagina oggetto in questo modo:

var myPage = (function() { 

    var that = {}; 

    that.init = function() { 

     $('#main_right_line_one').click(function(){ 
      $('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){ 
       $('#main_light_layover').fadeIn('slow'); 
      }); 
     }); 

     $('#main_right_line_two').click(function(){  
      $('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){ 
       $('#main_regular_layover').fadeIn('slow'); 
      }); 
     }); 

     $('#main_right_line_three').click(function(){ 
      $('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){ 
       $('#main_deep_layover').fadeIn('slow'); 
      }); 
     }); 

    } 

    return that; 

})();

fonte

2013-07-30 21:09:30

Questa è una risposta molto migliore di quella selezionata –

Questo aggiunge un intero mucchio di indirette confuse.La funzione init funzionerebbe bene solo essendo uno script procedurale, in quanto non si vorrebbe veramente eseguire quel metodo più di una volta. Lo script main.js è l'ultimo elemento nel corpo quindi non ha nemmeno bisogno di aspettare che il documento sia pronto. Come bonus non ci sarebbe nessuna variabile myPage globale e il garbage collector può ripulire tutti gli oggetti non più necessari. –

Impostazione di una funzione di inizializzazione in jQuery

risposta

Problemi correlati