[JavaScript] jQuery podstawy - optymalizacja Opcje

[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) 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:

[HTML] pobierz, plaintext 
$('a').click(function(){ $('p').hide(); $('.'+$(this).attr('id')).show()});
[HTML] pobierz, plaintext 

[b4rt3kk]

[HTML] pobierz, plaintext 
$('a').click(function(){
  var class = $(this).attr('id');
  $('.'+class).show();
}
[HTML] pobierz, plaintext 

[tycjan3000]

Dzięki chłopaki jesteście bezbłędni - dopiero zaczynam przygodę z jQuery i funkcja .attr nie była mi znana ale zaraz jquery.com wszystko mi o niej opowie.


pozdrawiam serdecznie