Ustawianie funkcji init w jQuery

Po prostu szybkie pytanie tutaj, chciałem dowiedzieć się, jak mógłbym ustawić je w funkcji init(), a następnie uruchomić funkcję na document.ready. Ten kod jest używany w oddzielnym pliku main.js. Czy trzeba go wywołać ze strony indeksu?Ustawianie funkcji init w 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'); 
    }); 
});

Każda pomoc jest doceniana. Naprawdę staram się o tym przekonać, ale nie mogę znaleźć dobrych tutoriali wyjaśniających init() wystarczająco dobrze dla mojego specyficznego kodu.

Źródło

2013-07-30 user2635811

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

tak czy użyłbym get() do pobrania elementów div? Nie jestem pewien, co dokładnie ładowałbym, zanim to zostanie zainicjowane. – user2635811

$ ("# main_right_line_one") jest selektorem, aby uzyskać div (jako obiekt jq). Tak więc ten element div musi już być obecny w kodzie HTML. dlatego będziesz chciał uruchomić to w init. – FlavorScape

Nie potrzebujesz specjalnych "połączeń", umieść go na stronie z <script src="yourfile.js"></script> i po prostu zapakuj kod jak poniżej, aby upewnić się, że zostanie wykonany po tym, jak dom będzie gotowy (i obecne elementy).

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

});

$(a_function) jest skrótem $(document).ready(a_function); więcej o ready handlers in the documentation.

Powodem $(document).ready(...)/$(...) jest w ogóle potrzebne jest to, że wybór jQuery jak $('#main_right_line_one') widzi tylko elementy, które występują w czasie wykonywania w drzewie DOM. Jednak zawartość znaczników <script> jest zwykle wykonywana przez przeglądarki, gdy tylko zostaną spełnione; i <script> elementy są zwykle zlokalizowane w <head>. W związku z tym skrypty często widziały niekompletne drzewo DOM. Teraz, dzięki projektowi jQuery, nawet jeśli $('#main_right_line_one') nie pasuje do żadnych elementów, nadal nie byłoby błędu; i handler click byłby powiązany z 0 elementami.

Tego wszystkiego można uniknąć, owijając ten kod w $(function() { ... }), który zapewnia, że niezależnie od kodu będzie on wykonywany po pełnym inicjalizacji DOM (lub natychmiast, jeśli został już zainicjowany).

Powodem dlaczego jest skrótowym jak $(function() {}) dla $(document).ready(function() {}) jest to, że wykonywanie kodu dopiero po drzewie DOM został wykończony jest takie konieczne wzór, który prawie każdy strona wykorzystuje jQuery będzie używany.

Źródło

2013-07-30 21:04:03

i, dla jasności, powyższe jest tym samym, co '$ (dokument) .ready (function() {' '// // twój kod tutaj" '});'. –

Tak więc wydaje się dość proste, aby ustawić to, co zrobiłem, ale komentarz powyżej "Ten kod zostanie automatycznie wykonany. Należy jednak pamiętać, że te elementy określone przez selektorów muszą istnieć w DOM, zanim będzie można dołączyć te zdarzenia do im." myli mnie.Czy jQeury nie modyfikuje elementów, które już zostały załadowane na stronie? Czy muszę zrobić coś dodatkowego w jquery, aby rozpoznać elementy div na mojej stronie, które będą używane z funkcjami onclick i fadein/out? – user2635811

EDYCJA - Nvm, strona już działa! Dzięki wielkie! – user2635811

na stronie indeksu:

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

Masz rację, że jest to dobra praktyka, aby owinąć cały swój kod obiektu i nazywają to z funkcją init(). Więc ty main.js, można mieć:

$(document).ready(function() { 

    myPage.init(); 

});

a następnie poniżej, które można zdefiniować obiekt strony tak:

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; 

})();

Źródło

2013-07-30 21:09:30

to jest o wiele lepsza odpowiedź niż wybrana –

To dodaje całą masę mylącego niedomyślania.Opcja init działałaby dobrze, po prostu będąc skryptem proceduralnym, ponieważ nie chciałbyś uruchomić tej metody więcej niż raz. Skrypt main.js jest ostatnim elementem w organizmie, więc nie musi nawet czekać na gotowy dokument, a jako bonus nie będzie żadnej dodatkowej globalnej zmiennej myPage, a garbage collector może wyczyścić wszystkie niepotrzebne obiekty. –

Ustawianie funkcji init w jQuery

Odpowiedz

Powiązane problemy