faire disparaître et apparaître

**keokaz** · 19/07/2013, 15h13

Bonjour,
j'ai ce code html

Code html :

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

1
2
3
4
5
6
<div id="menu">
    <h1>menu !</h1>
</div>
<div id="wysi" >editer moi</div>
<button id="cacher">cacher</button>
<button id="montrer">montrer moi</button>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(
    function(){
        $('#menu').hide();
    },
    $('#montrer').on('click',montrer(this))
);
 
function montrer(e)
{
    e.show();
}

le menu n' a pas disparu, comment je dois l'initialiser ?

merci pour la réponse

**DJ Caësar 9114** · 19/07/2013, 16h37

Salut,
Ca marche ça?

Code :

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

1
2
3
4
5
6
7
8
$(document).ready(function(){
    function montrer(e) {
        e.show();
        }
 
    $('#menu').hide();
    $('#montrer').on('click',montrer(this));
});

**Bovino** · 19/07/2013, 16h52

Il y a peu de chances : le second paramètre de .on() dans ce cas doit être une référence à une fonction, pas un appel de fonction : Les fonctions de rappel (callback) ou les utilisations cachées de eval().
D'autre part, appeler e un paramètre d'une fonction de rappel d'un événement est plutôt dangereux : c'est le nom habituellement donné à l'objet event passé en paramètre automatique.

Code :

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

1
2
3
4
5
$(document).ready(function(){
    $('#montrer').on('click',function(){
        $(this).toggle();
    });
});

devrait être largement suffisant...

**keokaz** · 19/07/2013, 17h10

merci bovino

donc le e doit être obligatoirement une fonction.

par contre ce n'est pas le bouton montrer qu'il faut faire apparaître ou disparaître,
c'est le menu,
mon menu est visible, alors que je souhaite qu'il soit pour le moment invisible avant de cliquer sur montrer

**DJ Caësar 9114** · 19/07/2013, 17h46

Ah ok, je n'avais pas compris:

Code :

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

1
2
3
4
5
6
$(document).ready(function(){
    $('#menu').hide();
    $('#montrer').on('click',function(){
        $('#menu').toggle();
        });
});

**keokaz** · 20/07/2013, 08h17

merci beaucoup cela fonctionne,

toggle() est comme une méthode qui garde en mémoire la méthode appelé quel que soit l'action demandé?
qui si on l'a rappelle , appelle l'inverse de la méthode appellé

par contre j'ai essayer ceci

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
 
<!doctype>
<html>
<head>
<title>Event Propagation</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
 
$(document).ready(function(){
    var display = false;    
 
    $("#display").on({
        click : function(){
            if(display === false){
                $("#menu").hide(); 
                display = true;
            }
            else
           {
               $('#menu"').show();
               display= false;
           }
        alert(display);
        }
    });
});
</script>
</head>
 
<body onload="load();">
                <div id="menu">
                    <h1>menu !</h1>
                </div>
 
                <div id="wysi" >
                    editer moi
                </div>
 
                <button id="display">
                    cacher
                </button>
 
 
 
</body>
</html>

comment doit t' on s'y prendre pour garder la valeur display ? (ma valeur reste à true)

**danielhagnoul** · 20/07/2013, 09h53

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var boolDisplay = false;    // attention aux noms des variables
 
$( "#display" ).on( "click", function(){
 
    if( boolDisplay == false ){
        $( "#menu" ).hide(); 
        boolDisplay = true;
    } else {
       $( "#menu" ).show();
       	boolDisplay = false;
    }
 
    console.log( boolDisplay ); // ici display c'est l'ID display
});

**keokaz** · 20/07/2013, 16h00

merci

je sais que c'est des choses simple, mais j'ai pas encore pris l'habitude, il y a toujours
des chose que j'oublie comme par exemple de vérifié systématiquement le DOM ...

sinon j'ai essayé ceci

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
 
<!doctype>
<html>
    <head>
        <title>Event Propagation</title>
        <script src" http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jqu...ry/1.10.2/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                var boolDisplay = false;
                $('#display').on('click',function(){
                    if(boolDisplay == false)
                        {
                            $('#menu').hide();
                            boolDisplay = true;
                        }
                    else{
                        $('#menu').show();
                        boolDisplay = false;
                    }
                });
 
                $('#wysi').attr('contenteditable',$('#menu').is(':visible')? 'true':'false');
 
                console.log($('#wysi').attr());
            });
        </script>
    </head>
 
    <body>
        <div id="menu">
            <button id="image">image</button>
            <button id="b">en gras</button>
        </div>
 
        <div id="wysi" >
            editer moi
        </div>
 
        <button id="display">
            cacher
        </button>
    </body>
</html>

je peux tous le temps éditer ? de plus j'ai cette erreur

Code :

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

1
2
3
4
5
6
 
 
TypeError: e is undefined
[Stopper sur une erreur] 	
 
...e page to get source for: http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jqu...

**danielhagnoul** · 20/07/2013, 20h56

Bonsoir

Soignez la qualité et la présentation de votre code, cela prend plus de temps, mais c'est du temps gagné pour la compréhension du code avant sa modification dans 6 mois.

La différence entre l'utilisation des attributs HTML et l'utilisation des propriétés du DOM n'est pas toujours évidente pour un débutant. Voir la

Comment puis-je gérer les attributs booléens ?

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
	                var boolDisplay = false,
	                	jObjMenu = $( "#divMenu" );
 
	                $( "#btnDisplay" ).on( "click", function(){
	                    if ( boolDisplay == false ){
	                    	jObjMenu.hide();
	                    	boolDisplay = true;
	                   	} else {
	                        jObjMenu.show();
	                        boolDisplay = false;
	                    }
 
	                   	$( "#divWysi" ).prop( "contenteditable",  jObjMenu.is( ":visible" ) );
 
	                   	// debug console, touche F12
	                   	console.log( "boolDisplay = ", boolDisplay,
	                   				 "divWysi contenteditable = ", $( "#divWysi" ).prop( "contenteditable") );
 
	                });
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
        <div id="divMenu">
            <button id="btnImage">image</button>
            <button id="btnB">en gras</button>
        </div>
 
        <div id="divWysi" >
            editer moi
        </div>
 
        <button id="btnDisplay">
            cacher
        </button>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-07-20T20:45:17.151+02:00" pubdate>2013-07-20T20:45:17.151+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**keokaz** · 20/07/2013, 22h08

merci

tu utilise ceci pour voir l'état de contenteditable

Code :

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

1
2
 
$( "#divWysi" ).prop( "contenteditable")

je n'arrive plus à saisir entre ces 2 phrases

- Pour construire ou gérer un attribut HTML,
- Pour construire ou gérer une propriété du DOM

un attribut c'est bien
<img src="logo.png">
src est un attribut ? si je me trompe pas ?

<div id="divWysi">
id ? c'est un attribut ?

**danielhagnoul** · 20/07/2013, 22h20

Lorsque j'écris le code HTML de la page web, "src" et "id" sont des attributs tout comme "contenteditable". Par exemple, en HTML5 : <div id="divEditable" contenteditable>Un texte</div>.

Lorsque la page est affichée dans le navigateur, si je souhaite modifier ou connaître la valeur d'un attribut booléen (voir le lien vers la FAQ), il convient d'utiliser la méthode prop(). Exemple : $( "#divEditable" ).prop( "contenteditable", false );.

**keokaz** · 20/07/2013, 22h41

ok pour cette subtilité ,

faire disparaître et apparaître

jQuery

Discussions similaires

Partager

Partager