Toggle pour cacher/apparaître un élément DOM [Résolu]

[flashnet]

Bonjour,

J'utilise une fonction basique pour cacher/afficher un élément du DOM.

Code :

1
2
3
4
5
6
7
8
9
 
<script>
	$(function() {
		$( "#calcul").click(function() {
			$( "#chiffre").toggle('blind');
 
		});
	});
</script>

J'ai donc un code HTML ressemblant à ça :

Code :

<div id="calcul">Nom du calcul</div><div id="chiffre">Mon chiffre</div>

J'aimerais améliorer la fonction dans le cas ou j'ai plusieurs div de calcul du style :

Code :

1
2
3
<div id="calcul1">Nom du calcul</div><div id="chiffre1">Mon chiffre 1</div>
<div id="calcul2">Nom du calcul</div><div id="chiffre2">Mon chiffre 2</div>
etc...

Je ne sais comment modifier la fonction pour qu'elle récupère le numéro de mes div ? Auriez-vous une solution svp ? Merci

[SpaceFrog]

soit tu récupères le chiffre terminal pour utiliser le sélecteur id
soit tu passe par $(this).next() vu la structure que tu utilises, le div cible étant juste après le div déclencheur

Code :

1
2
3
4
5
6
7
 
$(function() {
		$( "div[id^='calcul']").click(function() {
			$(this).next().toggle('blind');
 
		});
	});

[flashnet]

Excellent, merci beaucoup, ça fonctionne, je connaissais pas next.

Sait-tu ou je peux trouver de la doc pour ce code ? J'ai un peu de mal à comprendre...

div[id^='calcul']

[SpaceFrog]

un petit cheatsheet
http://woorkup.com/wp-content/upload...heet-1.4.2.pdf

en gros ça veut dire :
les div dont l'id commence par calcul

voir le chapitre SELECTORS / 5. ATTRIBUTE de la cheatsheet

[flashnet]

Merci bcp.