jQuery - récupération d'id

Version imprimable

Bonjour,
Ca fait plusieurs jours que je suis sur le même problème.
Voila je suis en train de faire un livre d'or, un peu plus complet qu'à l'habituel.
En effet, à chaque message posté dans ce livre d'or, on peut y répondre, comme dans un forum.
Donc voila comment ça se passe,
J'ai un message avec une flèche au bout. Quand je clique sur une flèche un contenu s'ouvre avec dedans les réponses s'il y en a et un petit formulaire à remplir pour y mettre sa propre réponse.
Une classe contient l'image de ma flèche pour qu'elle se répète sauf que qd je clique sur une flèche, ça ouvre tous les contenus. Ce qui est logique vu qu'ils ont tous la même classe.
De ce fait j'ai essayé de jouer avec un id unique mais le problème survient quand je veux le récupérer.

Code:

var id = $('.mont_desc').attr('id');

Mon code récupère tjs le même id, c'est à dire le premier qui est en rapport avec ma classe. Du coup je ne peux pas appliquer mon jQuery à l'id voulu.
La classe mont_desc contient ma flèche et la classe plus_moins a le contenu que je veux faire apparaître.
Je sais j'ai pas été chercher bien loin le nom de mes classes, mais bon pour le moment je veux juste faire fonctionner mon code, je changerais les noms plus tard.

Voici mon code php/html

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
76
77
78
79
</span><br /><span class='livre_cont'><div class='barre_livre'>Message de <a target='_blank' href=mailto:'bouletos@bipbip.com'>trgsdrhth</a> le 24/04/2012<div class='mont_desc' id='result1'></div></div><div class='cont_livre'>z"rgfts</div><div class='plus_moins'>                            <div class="form_reponse">
 
                                <form action="index.php?params=livre_or&cat_id=1&id=4" method="POST">
 
                                    <input type="hidden" name="id" value="14" />
 
                                    <div class="form_reponse_part1">
 
                                        <label for="auteur">Auteur :</label>
 
                                        <input type="text" id="auteur" name="auteur" value=""/><br />
 
 
 
                                        <label for="email">E-mail :</label>
 
                                        <input type="email" id="email" name="email" value=""/><br />
 
                                    </div>
 
                                    <div class="form_reponse_part2">
 
                                        <label for="message">Message :</label>
 
                                        <textarea id="message" name="message" cols="40" rows="5" ></textarea><br />
 
                                    </div>
 
                                    <input class="livre_reponse" type="submit" name="livre_reponse" value="Répondre">
 
                                    <div></div>
 
                                    <br clear="both" />
 
                                </form>
 
                            </div>
 
                        </div>
 
                       </span><br /><span class='livre_cont'><div class='barre_livre'>Message de <a target='_blank' href=mailto:'bouletos@bipbip.com'>ergtsrtg</a> le 24/04/2012<div class='mont_desc' id='result2'></div></div><div class='cont_livre'>qzefqf</div><div class='plus_moins'>                            <div class="form_reponse">
 
                                <form action="index.php?params=livre_or&cat_id=1&id=4" method="POST">
 
                                    <input type="hidden" name="id" value="15" />
 
                                    <div class="form_reponse_part1">
 
                                        <label for="auteur">Auteur :</label>
 
                                        <input type="text" id="auteur" name="auteur" value=""/><br />
 
 
 
                                        <label for="email">E-mail :</label>
 
                                        <input type="email" id="email" name="email" value=""/><br />
 
                                    </div>
 
                                    <div class="form_reponse_part2">
 
                                        <label for="message">Message :</label>
 
                                        <textarea id="message" name="message" cols="40" rows="5" ></textarea><br />
 
                                    </div>
 
                                    <input class="livre_reponse" type="submit" name="livre_reponse" value="Répondre">
 
                                    <div></div>
 
                                    <br clear="both" />
 
                                </form>
 
                            </div>
 
                        </div>

et voici mon code jQuery pour l'animation

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
                        $(document).ready(function(){
                            $(".plus_moins").hide();
 
                            $(".mont_desc").click(function(){
                                var more = $('.plus_moins');
                                var id = $('.mont_desc').attr('id');
                                if (more.is(':hidden')) {
                                    $(".mont_desc").animate({'opacity' : '0'},200, function() {
                                        $(this).css({'background-image' : 'url(images/plus.png)'})
                                            .animate({'opacity' : '1'},200);
                                    });
                                    more.show('slow');
                                }else{
                                    $(".mont_desc").animate({'opacity' : '0'},200, function() {
                                        $(this).css({'background-image' : 'url(images/moins.png)'})
                                            .animate({'opacity' : '1'},200);
                                    });
                                    more.hide('slow');
                                } 
                            });
                        });
                </script>

Merci d'avance de votre aide.
Amicalement,
Mell

06/05/2012, 13h49
SpaceFrog

le code serveur ne nous est pas utile, au contraire ...

Montre nous plutot le code source généré !

Sinon

Code:

var id = $('.mont_desc').attr('id');

tu selectionnes par une classe ... ça retourne une collection

essaye

Code:

var id = $('.mont_desc:eq(0)').attr('id');

ou

Code:

var id = $('.mont_desc')[0].attr('id');
06/05/2012, 14h19
Mell
Merci j'arrive à récupérer l'id grâce à

Code:

var id = $('.mont_desc:eq(0)').attr('id')

J'avais déjà essayé l'autre manière mais elle ne fonctionnait pas.
Maintenant il faut que je trouve le moyen d'activer mon jQuery seulement pour cet id.

Mais quand je met
Code:

1 2 3 4 id.animate({'opacity' : '0'},200, function() { $(this).css({'background-image' : 'url(images/plus.png)'}) .animate({'opacity' : '1'},200); });
C'est pas possible, ça ne fonctionne qu'avec une classe.

J'ai aussi testé en faisant ça aussi (bien entendu j'ai modifié la place de mon id dans mon html)
Code:

1 2 3 4 ... var id = $('.plus_moins:eq('+i+')').attr('id'); if (id.is(':hidden')) ...
Mais c'est pareil, je ne peux pas utiliser ma fonction is() avec l'id.

J'ai remodifié mon code dans mon premier message, je n'ai mis que les deux premiers messages de mon livre d'or, vu que le reste c'est la même chose.

Bonjour,
la récupération de l'id n'est pas nécessaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
	$(".plus_moins").hide();
 
	$(".mont_desc").click(function(){
		var more = $(this).parent().parent().find('.plus_moins'); // cherche le div '.plus_moins' qui suit celui cliqué
 
		if (more.is(':hidden')) {
			$(this).animate({'opacity' : '0'},200, function() {
				$(this).css({'background-image' : 'url(images/plus.png)'})
					.animate({'opacity' : '1'},200);
			});
			more.show('slow');
		}else{
			$(this).animate({'opacity' : '0'},200, function() {
				$(this).css({'background-image' : 'url(images/moins.png)'})
					.animate({'opacity' : '1'},200);
			});
			more.hide('slow');
		} 
	});
});

06/05/2012, 19h20
Mell

Oh merci ça marche ! :)

Code:

1
2
3
4
5
6
7
 
$('.mont_desc').each(function(i){
  $('.mont_desc:eq('+i+')').animate({'opacity' : '0'},200, function() {
    $(this).css({'background-image' : 'url(images/plus.png)'})
   .animate({'opacity' : '1'},200);
                                    });
});

Code:

1
2
3
4
5
6
7
 
 
$('.mont_desc').each(function(i){
  if ($('.mont_desc:eq('+i+')').css("overflow").is(':hidden')){
       //you code here
  }
});

Essaye ça.