JavaScript select onChange - div

Version imprimable

Voir 40 message(s) de cette discussion en une page

29/07/2011, 08h42
haNjo

Bonjour,

D'abord, merci pour ton aide :)

Ensuite, les besoins de l'application ne nécessite plus (directement, j'aimerai le réimplenter par après) le système du changement d'image. Je me penche donc sur la refonte du script pour ne plus avoir ce switch comme vous me l'avez conseillé toi et les autres. Je vais regarder déjà ce que vous m'avez donné comme explications et essayer de le refaire par moi-même.

Stay tuned! :P

Finalement, voici ce que donne mon script :)

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
 
var plus ='images/plus.png'
var moins = 'images/moins.png'	
 
	function visibilite(thingId, hideAll, img) {
		var targetElement = document.getElementById(thingId),
		allTargets=document.getElementById(hideAll).getElementsByTagName('div'),
				i,
		l = allTargets.length;
		for(i = 0; i<l; i++) {
			if(allTargets[i] == targetElement)  
				continue;
			allTargets[i].style.display = "none";
			document.getElementById('img1').src=''+plus+'';
			document.getElementById('img2').src=''+plus+'';
			document.getElementById('img3').src=''+plus+'';
			document.getElementById('img4').src=''+plus+'';
			}
 
		if (targetElement.style.display == "none"){
			targetElement.style.display = "block" ;
			document.getElementById(img).src=''+moins+'';
			}
		else{ 
			targetElement.style.display = "none" ;
			document.getElementById(img).src=''+plus+'';
			}
	}

Merci de votre temps!

05/08/2011, 12h47
Invité
c'est déjà mieux :ccool:

si tu veux faire mieux :
- renommer la variable 'plus' en un nom explicite : imgPlus, idem pour 'moins'
- tu déclaires i et l dans le scope de la fonction visibilite, mais tu ne t'en sers que dans ta boucle for. C'est donc mieux de les déclarer dans le for :
  Code:
  
  1 2 3 for(var i=0, l=allTargets.length; i<l; i++){ ... }
- dans ta boucle for, à chaque valeur de i, tu vas exécuter
  document.getElementById('img1').src=''+plus+'';
  Alors qu'une seule fois est suffisant.
  tu peux déclares un tableau :
  
  Code:
  
  var imgsId=['img1', 'img2', 'img3','img4'];
  
  et dans ta boucle écrire
  
  Code:
  
  document.getElementById(imgsId[i]).src...
  
  Tu peux faire mieux et directement concaténer sans avoir besoin de tableau:
  
  Code:
  
  document.getElementById('img'+i).src...
- Lorsque t'écris
  
  Code:
  
  document.getElementById('img1').src=''+plus+'';
  
  tu as pas besoin d'écrire ''+plus+'';
  en fait '' est une chaine de caractère (vide), et tu vas forcer le cast de ce qu'il y a après (donc en chaine de caractères). MAIS comme la variable 'plus' est déjà une chaine de caractère, ca sert à rien (ca change rien). Donc
  
  Code:
  
  document.getElementById('img1').src=plus;
  
  est suffisant
- targetElement.style.display = "block" ;
  le but est de rendre targetElement visible. C'est pas nécessaire de spécifier que c'est de type block, simplement ...display=''; suffit. Si tu cachais un span par exemple, qui est de type inline, tu changerais son rendu en block, alors que '' enlève juste le display none et laisserait bien le type inline.
Sinon ca a l'air good

Voir 40 message(s) de cette discussion en une page