Un toggle qui fonctionne mal :/

Version imprimable

11/10/2009, 16h30
Nowwis

Un toggle qui fonctionne mal :/
Bonjour !

Donc j'ai essayé de faire un petit truc sympa en jquery pour afficher/cacher des horaire de film qui sont à l'affiche :
Code:

1 2 3 4 5 6 7 8 9 10 <script> $(document).ready(function(){ $("a.cliquerhoraire").click(function () { $("div.horaire").toggle("slow"); }); }); </script>
mais quand je clique sur un seul, tous s'affiche (je crois que c'est normal vu que tous on la class horaire...)

Comment faire pour que ça m'affiche seulement celui sur lequel je clique ?

Je crois que c'est avec un this, mais je ne sais pas comment l'utiliser...

Merci d'avance :)

Bonsoir.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// Si vous cliquiez sur la div de class horaire, on pourrait écrire :
$("div.horaire").live('click',function(){
   $(this).toggle("slow");
});
 
/*
* Ici il faudrait savoir s'il y a un point commun, un élément qui relie,
* le lien <a> qui est cliqué et la <div> où l'on doit
* appliquer l'effet toggle().
*/
$("a.cliquerhoraire").click(function () {
   $("div.horaire").toggle("slow");
});

Ben voici mon code, il n'y a pas vraiment de lien apparemment je pense... :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<table cellpadding="3" cellspacing="1" style="margin-left:10px">
	<tr>
  		<td>&nbsp;</td>
    	<td valign="bottom" style="text-align:center"><a href="index.php?page=film&id=<?php echo $data_affiche['id']?>"><strong><?php echo htmlentities(trim($data_affiche['nomfilm']))?></strong></a></td>
	</tr>
 	<tr>
    	<td style="text-align:justify; padding-left:20px"><a href="index.php?page=film&id=<?php echo $data_affiche['id']?>"><img style="width:180px;" border=0; src="<?php echo $data_affiche['affichefilm']?>"/></a></td>
		<td style="text-align:justify; padding-left:20px"><p><strong><span>Durée : </span></strong><?php echo htmlentities(trim($data_affiche['dureefilm']))?><br>
	  		<strong><span>Synopsis : </span></strong><br>
	  		<?php echo htmlentities(trim($data_affiche['synopsis']))?></p>
	</tr>
    <tr><td colspan="2">&nbsp;</td></tr>
<tr><td colspan="2" valign="top" style="padding-bottom:5px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="cliquerhoraire">Afficher les horaires de cette semaine :</a></td></tr>  
<tr><td colspan="2">
<div class="horaire" style="display:none">
    <table align="center" id="horaire1" border="1" cellpadding="5">
<tr>
    	<th class="horaire1">
        Mercredi
        </th>
        <th class="horaire1">
        Jeudi
        </th>
        <th class="horaire1">
        Vendredi
        </th>
        <th class="horaire1">
        Samedi
        </th>
        <th class="horaire1">
        Dimanche
        </th>
        <th class="horaire1">
        Lundi
        </th>
        <th class="horaire1">
        Mardi
        </th>
</tr>
<tr>     
<?php
$date_exploser = explode('-', $datedebutfilm);
$time = time();
$timestamp = mktime(0,0,0,$date_exploser[1], $date_exploser[2], $date_exploser[0]);
$une_semaine = 60*60*24*7;
if ($time >= $timestamp AND $time <= $timestamp+$une_semaine ){
$a = 0;
}
if ($time >= $timestamp+$une_semaine AND $time <= $timestamp+2*$une_semaine){
$a = 1;
}
if ($time >= $timestamp+1+2*$une_semaine AND $time <= $timestamp+3*$une_semaine){
$a = 2;
}
if ($time >= $timestamp+1+3*$une_semaine AND $time <= $timestamp+4*$une_semaine){
$a = 3;
}
if ($time >= $timestamp+1+4*$une_semaine AND $time <= $timestamp+5*$une_semaine){
$a = 4;
}
if ($time >= $timestamp+1+5*$une_semaine AND $time <= $timestamp+6*$une_semaine){
$a = 5;
}
for ($b=0; $b<7; $b++){
	$sql_affiche2 ='SELECT * FROM horaire WHERE semaine='.$a.' and jour='.$b.' and idfilm='.$data_affiche['id'].''; 
    $req_affiche2 = mysql_query($sql_affiche2) or die('Erreur SQL !<br />'.$sql_affiche2.'<br />'.mysql_error());
	while ($data_affiche2 = mysql_fetch_array($req_affiche2)) {?>
<td class="horaire2">
<?php echo $data_affiche2['horaire']; ?>
</td>
<?php
}}
?>     
</tr>
</table>

J'espère que ça sera possible !!!

Merci d'avoir pris du temps pour répondre en tout cas :)

Bonsoir.

Si je réduis votre code à l'essentiel, j'obtiens :
Code:

1 2 3 4 5 6 7 8 9 10 11 <tr> <td colspan="2" valign="top" style="padding-bottom:5px;"> <a class="cliquerhoraire"> Afficher les horaires de cette semaine : </a> </td> </tr> <tr> <td colspan="2"> <div class="horaire" style="display:none">
Nous savons déjà qu'il y a plusieurs div.horaire.
Il y a un seul lien a.cliquerhoraire ou y a-t-il un lien a.cliquerhoraire pour chaque div.horaire ?

12/10/2009, 19h41
Nowwis

Bonsoir !

Il y a bien plusieurs lien a.cliquerhoraire pour plusieurs div.horaire !

Et quand je clique sur un seul, ça m'affiche tout ^^'

Bonsoir.

Alors vous pourriez relier un couple par l'intermédiaire d'un attribut :

Code:

1
2
3
4
 
	$("a.cliquerhoraire").click(function(){
		$("div.horaire[n='" + $(this).attr("n") + "']").toggle("slow");
	});

Code:

1
2
 
	<a class="cliquerhoraire" n="3">Afficher les horaires de cette semaine :</a>

Code:

1
2
 
	<div class="horaire" n="3" style="display:none; width:200px; height:200px; background-color:#CCCCCC; border:1px solid #000000;">Division 1</div>

12/10/2009, 21h32
Nowwis
vu que c'était une boucle PHP qui allait chercher dans ma BdD grâce à mon script SQL, je n'ai donc qu'une seul fois ce texte.

Je me suis arrangé pour afficher simplement l'id de ma base en attribut, ce qui donne au final :
Code:

1 2 <a class="cliquerhoraire" n="<?php echo $data_affiche['id'] ?>">Afficher les horaires de cette semaine :</a> <div class="horaire" n="<?php echo $data_affiche['id'] ?>" style="display:none">
Et ça marche du tonnerre !!!

Merci beaucoup !