Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] jQuery podstawy - optymalizacja
Forum PHP.pl > Forum > Przedszkole
tycjan3000
Zadanie jest proste sa 3 <a> linki po kliknięciu na nie maja się pojawiać 3 różne akapity <p> kliknięcie na link pies powoduje wyświetlenie informacji o psie

<a id='pies' href="#">pies</a>
<a id='kot' href="#">kot</a>
<a id='mysza' href="#">mysza</a>

<p class='pies'>Info o Psie</p>
<p class='kot'>Info o Kocie</p>
<p class='mysza'>Info o Myszce</p>

I o to kod jQuery który stworzyłem.

$(document).ready(function() { // funkcja startowa
$('p').hide(); //ukrycie wszystkich znaczników
$('a').click(function(){ // funkcja działa po kliknięciu na link
switch (this.id){ //instrukcja warunkowa
case 'pies': //id=pies
$('p').hide(); // schowaj wszystko
$('.pies').show(); //pokaz znacznik o klasie pies
break; //koniec
case 'kot':
$('p').hide();
$('.kot').show();
break;
case 'mysza':
$('p').hide();
$('.mysza').show();
break;
}
});
});

I tak jak za każdym razem jak dokładam nowy link dodaje kolejny case i tworzy się tasiemiec przy 10 linkach kod wydaje się porostu długi czy zna ktoś może jakiś krótszy sposób na rozwiązanie problemu może użycie this zamiast oznaczanie tych klass może do się to zrobić inaczej lepiej ? - no chyba że mój sposób myślenia jest optymalny to też proszę o takie info. I druga rzecz zauważyłem $('p').hide(); //ukrycie wszystkich znaczników - jest dość wolne przy ładowaniu strony czasami najpierw wyświetla wszystko dopiero potem ukrywa i to widać (nie zawsze ale przy większych treściach będzie problem) sad.gif czy ukrycie znaczników z poziomu css p{ display:none} będzie szybsze ?
Pawel_W
1. $(document).ready() wywołuje się dopiero po załadowaniu kodu całego dokumentu, dlatego w przypadku większej ilości kodu może się okazać, że rzeczywiście zobaczysz najpierw paragrafy a dopiero potem znikną
2. co do optymalizacji: możesz zrobić to tak:
  1. $('a').click(function(){ $('p').hide(); $('.'+$(this).attr('id')).show()});
b4rt3kk
  1. $('a').click(function(){
  2. var class = $(this).attr('id');
  3. $('.'+class).show();
  4. }
tycjan3000
Dzięki chłopaki jesteście bezbłędni smile.gif - dopiero zaczynam przygodę z jQuery i funkcja .attr nie była mi znana ale zaraz jquery.com wszystko mi o niej opowie.


pozdrawiam serdecznie






To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.