aide pour synthetiser au mieux mon code

Version imprimable

salut,
voilà un petit script fonctionnel, mais voilà, je ne sais pas comment l'optimiser.

je sais qu'en utilisant $(trucMuche).each(function(index){}) y a moyen d'y arriver, mais je ne sais pas comment distinguer la sélection courante, de celle qui ne l'est pas....
Bref, ça sera plus clair par l'exemple:
http://lefelinherbivore.com/test/
l'ensemble de l'exemple à télécharger par là: (.rar)

et ici, mon js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
$(document).ready(function(){
	var bottom0=false;
	var bottom1=false;
	var bottom2=false;
	$('.lien0').click(function(){
		$(this).css('backgroundPosition','bottom');
		bottom0=true;
		if(bottom1==true){
		$('.lien1').css('backgroundPosition','top');
		bottom1=false;
		}
		if(bottom2==true){
		$('.lien2').css('backgroundPosition','top');
		}
	})
	$('.lien1').click(function(){
		$(this).css('backgroundPosition','bottom');
		bottom1=true;
		if(bottom0==true){
		$('.lien0').css('backgroundPosition','top');
		bottom0=false;
		}
		if(bottom2==true){
		$('.lien2').css('backgroundPosition','top');
		bottom2=false;
		}
	})
	$('.lien2').click(function(){
		$(this).css('backgroundPosition','bottom');
		 bottom2=true;
		if(bottom0==true){
		$('.lien0').css('backgroundPosition','top');
		bottom0=false;
		}
		if(bottom1==true){
		$('.lien1').css('backgroundPosition','top');
		bottom1=false;
		}
	})
 
})

ici mon css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
li, ul{list-style:none;
}
a{
	text-align:center;
	font:normal 9px Arial, Helvetica, sans-serif;
	color:#333;
	float:left;
	text-decoration:none;
	background:url(test.jpg) top left no-repeat;
	display:block;
	width:45px;
	height:8px;
}
a:hover, .bottom{
	background-position:bottom;
}
a:focus{
	outline:none;
}
 
.up{
	background-position:top
	}

ici mon html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<ul>
  <li>
    <a class="lien0" href="#">lien 0</a>
  </li>
  <li>
    <a class="lien1" href="#">lien 1</a>
  </li>
  <li>
   <a class="lien2" href="#">lien 2</a>
  </li>
</ul>

Mille mercis pour votre aide ;-)

12/02/2011, 18h12
Bovino

Citation:

mais je ne sais pas comment distinguer la sélection courante

Code:

$(this)

dans le each.
12/02/2011, 20h05
lefelinherbivore
salut, je pense que sur 9500 messages postés, il doit y en avoir quelques uns de médiocres et je pense que celui-ci en fait parti.
Donc, pour développer un peu:
si j'ecris:
Code:

1 2 3 4 5 6 7 8 $(document).ready(function(){ $('a').each(function(index){ $('.lien'+index).click(function(){ $(this).css('backgroundPosition','bottom'); }); }); });
Comment faire un '$(this).css('backgroundPosition','top')' pour les autres onglets non concerné par le click?

Peut-être ais-je tout faux, que je ne suis pas du tout sur la bonne piste, et qu'il faut mettre en place un gestionnaire d'évènement, event...
J'en sais rien !!!

Merci, pour vos réponses pertinentes.
16/02/2011, 14h12
gwinyam

Bovino a répondu exactement à ta question, sa réponse est très pertinente.

Pour répondre à ton besoin, je vois d'ici déjà un problème de conception :

Code:

$('.lien'+index)

Dans ton code, tu affectes donc une classe 'lien+index' à chacun de tes onglets. N'aurait-il pas été plus pertinent de leur donner à tous une classe lien plus un id (correspondant à ton index)? Ainsi si tu veux impacter tous tes onglets, tu n'aurais qu'à faire :

Code:

$('.lien').css('backgroundPosition','bottom');

Enfin si j'ai bien compris ta demande.

Pour rappel : Les classes sont dédiés à un usage possiblement multiple par CSS ou pour des besoins de sélection par Javascript. Quand un élément du DOM doit être identifiable de façon unique, on le fait soit par parcours de l'arborescence (laborieux, peu efficace et surtout dangereux) soit par un id.