gestion des ID incrémentés

Version imprimable

j'aimerais que quand on clique sur 0 ou 1 ou 2
ca affiche le contenu de id="content".
j'ai essayé comme celà mais ca ne semble pas marcher.Avez vous une piste
merci d'avance
Code:

1 2 3 4 5 6 7 8 9 $(document).ready(function(){ $("#cmd_ch").click(function(){ $("#content").slideToggle("slow"); $(this).toggleClass("active"); }); });
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="content" class="maDivClass"> aaaaaaaaaaaaaaaaaaaaaaaaaa<br> bbbbbbbbbbbbbbbbbbbbbbb<br> cccccccccccccccccccccccc<br> </div> <?php $i=3; for ($i=0;$i<3;$i++) echo '<p id="cmd_ch'.$i.'">'.$i. "</p>"; ?>

j'ai remodifié le code comme ceci mais ca marche toujours pas

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script src="js/general_perso.js"></script> 
    <script type="text/javascript">  	
function t(i){
	$("#cmd_ch"+i).click(function(){
	  $("#content").slideToggle("slow");
	  $(this).toggleClass("active");
	});
	return false;
}	
$(document).ready(function(){
//alert('ee');
t(i);
}); 
 
    </script>
</head>
<body>
    <button id="aff" type="button">Afficher/cacher</button>
    <div id="content" class="maDivClass">
	aaaaaaaaaaaaaaaaaaaaaaaaaa<br>
	bbbbbbbbbbbbbbbbbbbbbbb<br>
	cccccccccccccccccccccccc<br>
	</div>
<?php
$i=3;
for ($i=0;$i<3;$i++)    
echo '<a id="cmd_ch'.$i.'" href="" onclick="t('.$i.')">'.$i. "<br></a>";
?>
</body>
</html>

26/09/2010, 01h38
Arnaud F.
Bonjour,

Une manière simple et efficace pour réaliser cela (et éviter la boucle) est d'utiliser la puissance des sélecteurs jQuery.

Cela donne :
Code:

1 2 3 4 5 6 7 $(document).ready(function() { $("a[id^=#cmd_ch").click(function() { $("#content").slideToggle("slow"); $(this).toggleClass("active"); }); });
Ce bout de code :

Code:

$("a[id^=#cmd_ch")

permet de sélectionner toutes les balises <a> ayant un ID commencant par cmd_ch (tout simplement), vos ID 1, 2, 3 seront donc sélectionnés et l'évènement click géré sur chacun d'eux.

Du coup plus besoin de gérer de "onclick" ni de fonction intermédiaire.

merci arnaud
j'ai testé ton code mais ca ne marche pas .il ne manque pas un each?
voici le code modifié

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script src="js/general_perso.js"></script> 
    <script type="text/javascript">  	
 
$(document).ready(function() {
	  $("a[id^=#cmd_ch").click(function() {
	  	  $("#content").slideToggle("slow");
	  	  $(this).toggleClass("active");
	  });
});
    </script>
</head>
<body>
    <button id="aff" type="button">Afficher/cacher</button>
    <div id="content" class="maDivClass">
	aaaaaaaaaaaaaaaaaaaaaaaaaa<br>
	bbbbbbbbbbbbbbbbbbbbbbb<br>
	cccccccccccccccccccccccc<br>
	</div>
<?php
$i=3;
for ($i=0;$i<3;$i++)    
echo '<a id="cmd_ch'.$i.'" href="" onclick="t('.$i.')">'.$i. "<br></a>";
?>
</body>
</html>

Le code corrigé (& testé) :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script src="js/general_perso.js"></script> 
    <script type="text/javascript">  	
 
$(document).ready(function() {
	  $("a[id^=cmd_ch]").click(function() {
	  	  $("#content").slideToggle("slow");
	  	  $(this).toggleClass("active");
	  });
});
    </script>
</head>
<body>
    <button id="aff" type="button">Afficher/cacher</button>
    <div id="content" class="maDivClass">
	aaaaaaaaaaaaaaaaaaaaaaaaaa<br>
	bbbbbbbbbbbbbbbbbbbbbbb<br>
	cccccccccccccccccccccccc<br>
	</div>
<?php
$i=3;
for ($i=0;$i<3;$i++)    
echo '<a id="cmd_ch'.$i.'" href="#">'.$i. "<br /></a>";
?>
</body>
</html>

Le problème venait du selector que j'avais mal rédigé :oops:

Code:

a[id^=cmd_ch]

1) j'avais oublié de fermer le ]
2) pas besoin de #

;)

26/09/2010, 11h45
bigs3232

youpi ca marche .
big merci a arnaud.
au fait je ne comprends pas cette intruction.c'est une expresssion regulière de jquery ou quoi.
il y a un lien ou on peut avoir plus dinfos là dessus

Citation:

id^
26/09/2010, 11h51
Arnaud F.

Tout est là : http://api.jquery.com/category/selectors/

Et plus précisément :

Citation:

Attribute Starts With Selector [name^=value]
Selects elements that have the specified attribute with a value beginning exactly with a given string.