gestion des ID incrémentés

**bigs3232** · 25/09/2010, 22h14

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 :

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

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

Code :

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

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>";
?>

**bigs3232** · 25/09/2010, 23h09

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

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
<!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>

**Arnaud F.** · 26/09/2010, 01h38

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 :

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

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 :

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

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

**bigs3232** · 26/09/2010, 08h38

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

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
 
<!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>

**Arnaud F.** · 26/09/2010, 10h58

Le code corrigé (& testé) :

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
 
<!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é

Code :

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

a[id^=cmd_ch]

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

**bigs3232** · 26/09/2010, 11h45

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

id^

gestion des ID incrémentés

jQuery

Vue hybride

Discussions similaires

Partager

Partager