Premier clique et évènement click()

**Macmillenium** · 14/06/2009, 18h15

Bonjour à tous,

Dans ce simple code :

Code javascript :

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
 
jQuery(document).ready(function($) {
  $('#images_prods > ul > li > ul > li').toggle(function() { 
                [...]
		$("#images_prods > ul > li > ul > li > p").click( function() {
			$(this).css("background", "red");
                         [...]
		});
  }, function() {
                 [...]
		$("#images_prods > ul > li > ul > li > p").click( function() {
			$(this).css("background", "green");
                         [...]
		});
    });
})

Le tout premier clique (lors du 1er chargement de la page) sur l'élément <p> ne donne rien, par contre tout fonctionne correctement à partir du deuxième clique avec la création du background:red; ...

Une idée ?

Par avance, Merci.

**danielhagnoul** · 14/06/2009, 20h09

Bonsoir Macmillenium.

N'ayant pas tout le code et ne sachant pas exactement ce que vous souhaitez faire, voici un exemple (basé sur les éléments présents dans votre demande) d'utilisation de toggle().

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
103
104
105
106
107
108
109
110
111
 
<!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:#696969;
            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;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
        #images_prods {
            display:none;
        }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var boolColor = false;
 
            $("#images_prods").find("p").click(function(){
                if (boolColor) {
                    $(this).css("background", "red");
                } else {
                    $(this).css("background", "green");
                }
            });
 
            $('#images_prods').hover(
                function(){
                    console.log("L'utilisateur est ici !");
                },
                function() {
                    console.log("l'utilisateur n'y est plus !");
                }
            );
 
            $("#showhidde").click(function(){
                $('#images_prods').toggle(2000, function(){
                    if ($('#images_prods').css("display") == "block") {
                        boolColor = !boolColor;
                    } else {
                        $("#images_prods").find("p").css("background", "white");
                    }
                });
            });
         });
    </script>
</head>
<body>
    <div id="conteneur">
        <button id="showhidde" type="button">Montrer/Cacher</button>
        <div id="images_prods">
            <ul style="list-style-type:decimal; margin-left:24px;">
                <li>
                    <p>
                        ul 1 li 1 p1
                    </p>
                    <p>
                        ul 1 li 1 p2
                    </p>
                    <ul style="list-style-type:circle; margin-left:24px;">
                        <li>
                            <p>
                                ul 2 li 2 p1
                            </p>
                            <p>
                                ul 2 li 2 p2
                            </p>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

**Macmillenium** · 14/06/2009, 21h01

Merci danielhagnoul,

Je n'ai pas de problème avec la fonction toggle(), j'essaye simplement de changer le style de l'élément <p> enfant du <li> à chaque clique, voici mon code XHTML, je gère une galerie de plusieurs niveaux :

Code xhtml :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="images_prods">
	<ul>
		<li>
			<ul>
				<li>
					<p>Contenu du niveau concerné</p>
				</li>
			</ul>
		</li>
	</ul>
</div>

Si je rajoute :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
jQuery(document).ready(function($) {
  $('#images_prods > ul > li > ul > li').toggle(function() { 
		$("#images_prods > ul > li > ul > li > p").click( function() {
			$(this).css("background", "red");
			alert('1');
		});
  }, function() {
		$("#images_prods > ul > li > ul > li > p").click( function() {
			$(this).css("background", "green");
			alert('2');
		});
    });
})

L'alert1 s'affiche lors du 2éme clique, il me semble que l'utilisation des deux fonctions toggle() et click() pose un problème

Une version simplifiée :

Code xhtml :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
	<title>Document Sans Nom</title>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js"></script> 
	<script type="text/javascript">
                jQuery(document).ready(function($) {
                  $('#images_prods > ul > li > ul > li').toggle(function() { 
                                $(this).toggleClass("affichegallerie");
                                $("#images_prods > ul > li > ul > li > p").click( function() {
                                        $(this).css("background", "red");
                                });
                  }, function() {
                                $(this).toggleClass("affichegallerie");
                                $("#images_prods > ul > li > ul > li > p").click( function() {
                                        $(this).css("background", "green");
                                });
                        });
                })
        </script>
	<style type="text/css">
                .affichegallerie ul { display:none }
        </style>
</head>
 
<body>
 
	<div id="images_prods">
		<ul>
			<li>
				<ul>
					<li>
						<p>niveau concerné</p>
						<ul>
							<li>détail niveau concerné</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>
				<ul>
					<li>
						<p>niveau concerné</p>
						<ul>
							<li>détail niveau concerné</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
 
</body>

Je travail sur un projet qui utilise la version 1.2.1 donc pas moyen de revenir en arrière ...

**danielhagnoul** · 14/06/2009, 22h19

Bonsoir.

Je crois comprendre que le programme fait ce qui lui est demandé, le premier click sert à toggle(func1, func2,...) et lorsque le premier click à eu lieu et seulement alors le click sur le paragraphe est devenu actif.

Les clicks suivants jouant en même temps sur toggle et sur la couleur.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
//debug test OK !
$('#images_prods > ul > li > ul > li > p').toggle(
  function () {
    console.log("function 1");
    $(this).css({"color":"blue"});
  },
  function () {
    console.log("function 2");
    $(this).css({"color":"red"});
  }
);

**Macmillenium** · 14/06/2009, 22h58

Finalement, j'ai utilisé l'évènement toggleClass()

Code :

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

1
2
3
4
5
 
$('#images_prods > ul > li > ul > li').toggle(function() { 
   $(this).toggleClass("affichegallerie");
   $(this).find("p").toggleClass("vert");
 }

Tout fonctionne correctement.

Merci.

Premier clique et évènement click()

jQuery

Vue hybride

Discussions similaires

Partager

Partager