Discussion :

[lefelinherbivore]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this)

dans le each.

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

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

Sélectionner tout - Visualiser dans une fenêtre à part

$('.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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.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.