Selecteur jQuery pour la gestion d'un click

**Dartalouf** · 26/09/2009, 20h00

Bonjour à tous ,

J'abandonne ... :-)
Je travail sur un site utilisant du jQuery1.3.2 , mais j'ai quelques problème au niveau d'un selecteur a utiliser.

Je souhaiterais tout simplement créer une liste avec un simple lien visible qui permettrait lors du clique sur le lien d'afficher un div intégrer dans cette liste.

Voici donc le code 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
 
<ul>
    <li class="listgagnant"><a href="#">lien Contenu 1</a>
        <div>Contenu</div>
    </li>
    <li class="listgagnant"><a href="#">lien Contenu 2</a>
        <div>Contenu</div>
    </li>
    <li class="listgagnant"><a href="#">lien Contenu 3</a>
        <div>Contenu</div>
    </li>
    <li class="listgagnant"><a href="#">lien Contenu 4</a>
        <div>Contenu</div>
    </li>
</ul>

Et voila dans l'idée le JS que je souhaiterais utiliser (et qui ne marche pas bien entendu :-)) :

Code :

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

1
2
3
4
5
6
 
  $(".listgagnant > div").hide();
 
    $(".listgagnant").click(function(){
        $(".listgagnant > div").toggle("fast");
    });

Et bien entendu , l'effet s'appliquer sur l'intégralité des divs issue de la classe (et pas uniquement sur le div qui a été cliqué par l'utilisateur).

J'imagine que c'est un problème très simple, mais je n'arrive pas vraiment à trouver le selecteur adapté.

Quelqu'un aurait une piste?

Merci d'avance,
Dart

**danielhagnoul** · 26/09/2009, 21h06

Bonsoir.

Voici un exemple (voir les commentaires) :

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
<!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>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
 
        /* TEST */
        ul#ulgagnantID {
            width:300px;
            height:auto;
            border:1px solid #0000FF;
            margin:12px;
            padding:6px;
        }
        ul#ulgagnantID li div {
            display:none;
            width:auto;
            height: 100px;
            margin:6px;
            padding:6px;
            background-color:#CCCCCC;
            border:1px solid red;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            /*
            * On cherche le parent UL
            * On cherche le numéro d'index du li
            * On applique le toggle uniquement à l'élément d'index i
            */
            $(".listgagnant").click(function(){
                var objUL = $(this).parents("ul");
 
                var i = $("li", objUL).index(this);
 
                // Firefox et Firebug
                // console.log($(objUL)[0] + ", " + i);
 
                $(".listgagnant > div").eq(i).toggle("fast");
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
 
        <ul id="ulgagnantID">
                <li class="listgagnant">
                    <a href="#">lien Contenu 1</a>
                    <div>Contenu</div>
                </li>
                <li class="listgagnant">
                    <a href="#">lien Contenu 2</a>
                    <div>Contenu</div>
                </li>
                <li class="listgagnant">
                    <a href="#">lien Contenu 3</a>
                    <div>Contenu</div>
                </li>
                <li class="listgagnant">
                    <a href="#">lien Contenu 4</a>
                    <div>Contenu</div>
                </li>
        </ul>
 
        <div id="affiche"></div>
    </div>
</body>
</html>

**Dartalouf** · 26/09/2009, 21h27

Bonjour ,

Merci beaucoup, ça a totalement résolu le problème.
Je pensais qu'il y avait une méthode pour traiter ça simplement avec un petit selecteur , je crois que j'aurais pu chercher longtemps :-).

Merci encore,
Dart

**danielhagnoul** · 27/09/2009, 08h56

Bonjour.

J'ai lu votre message hier soir, bien entendu votre réflexion sur la complexité de la solution a fait son chemin dans mon inconscient cette nuit, et comme d'habitude je me réveille avec une solution plus simple donc meilleure.

Il y a souvent plusieurs solutions à un problème.

Il faut comprendre que pour résoudre un problème il est logique de partir de son énoncé, ici :

Code :

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

$(".listgagnant > div").toggle("fast");

ce qui induisait la recherche du bon index.

Mais le plus simple c'est :

Code :

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

1
2
3
4
 
$(".listgagnant").click(function(){
        $(this).find("div").toggle("fast");
});

Avec toutes mes excuses pour ce contretemps.

Selecteur jQuery pour la gestion d'un click

jQuery

Vue hybride

Discussions similaires

Partager

Partager