jQuery

**Mell** · 06/05/2012, 13h46

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 :

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

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 :

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

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

**SpaceFrog** · 06/05/2012, 13h49

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

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

Sinon

Code :

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

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

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

essaye

Code :

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

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

ou

Code :

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

var id = $('.mont_desc')[0].attr('id');

**Mell** · 06/05/2012, 14h19

Merci j'arrive à récupérer l'id grâce à

Code :

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

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 :

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

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 :

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

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.

Invité · 06/05/2012, 19h15

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

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
$(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');
		} 
	});
});

**Mell** · 06/05/2012, 19h20

Oh merci ça marche !

**headmax** · 06/05/2012, 19h26

Code :

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

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 :

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

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.

jQuery - récupération d'id

Vue hybride

Discussions similaires

Partager

Partager