Désafficher-afficher en jQuery

**Znojmo** · 29/05/2013, 00h55

Bonjour tout le monde,

J'essaie de faire un site où on peut afficher un chapitre d'un texte en cliquant sur la section correspondante à gauche, et j'aurais besoin d'utiliser une fonction désafficher (classe) pour désafficher tous les éléments d'une classe, puis une fonction afficher(id) pour afficher un id en particulier. J'avais essayé avec Javascript et ça marchait très bien, mais j'avais besoin de la fonction GetElementbyClassName qui n'est pas pris en charge par les anciennes versions d'IE.

J'essaie donc de convertir ça en jQuery. J'ai simplifié ma page au maximum pour que vous puissiez comprendre assez rapidement, alors si quelqu'un peut y jeter un coup d'œil et me dire ce qui ne fonctionne pas dessus, j'aimerais bien.

En gros, quand on clique sur les noms des sous-chapitres à gauche, ça devrait faire disparaître tous les noms à droite et apparaître seulement celui sur lequel on a cliqué (si je clique sur 1.1.1 à gauche, le 1.1.2 et 1.1.3 s'enlèvent à droite). Je sais qu'il n'y a pas de lien href mais j'ai fait exactement la même chose en Javascript, et ça fonctionnait alors je suppose que ce n'est pas ça le problème.

Quelqu'un voit mon erreur?

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
<html>
 
<head>
 
 
<script src="http://code.jquery.com/jquery-1.4.2.min.js">
$(document).ready(
  function desafficher(classe) {
   $("."+classe).hide();
  }
  function afficher(id) {
    $("#"+id).show();
  }
});
</script>
 
 
</head>
 
<body>
 
 
<div id="boutons" style="position:absolute; left:20px;">
 
 
<div id="sec1">
<a onclick="desafficher('sec');afficher('1.1.1');">1.1.1</a>
</div>
 
<div id="sec2">
<a onclick="desafficher('sec');afficher('1.1.2');">1.1.2</a>
</div>
 
<div id="sec3">
<a onclick="desafficher('sec');afficher('1.1.3');">1.1.3</a>
</div>
 
 
 
</div>
 
 
 
 
 
<div id="texte" style="position:absolute; left:80px;">
 
 
 
<div id="1.1.1" class="sec">
1.1.1
</div>
 
<div id="1.1.2" class="sec">
1.1.2
</div>
 
<div id="1.1.3" class="sec">
1.1.3
</div>
 
 
</div>
 
 
 
 
</body>
</html>

**Bovino** · 29/05/2013, 08h24

Tu ne sembles pas avoir compris à quoi correspond la fonction de rappel de la méthode .ready().

Un peu de lecture : Qu'est-ce que la notion de Ready ? (et suivante).

**Znojmo** · 29/05/2013, 20h58

Oui c'est vrai, j'avais oublié cette partie-là de mes études. C'est comme le unload de javascript, or je ne veux pas que les deux fonctions s'exécutent au début.

Toi tu mettrais quelle syntaxe pour qu'elles s'exécutent au clic d'un élément dont on doit repêcher le id?

**danielhagnoul** · 29/05/2013, 22h31

Exemple :

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
<!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://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-2.0.0.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/base.js",
			function(){
 
				$( function(){
 
					$( "button", "#boutons" ).on( "click", function(){
						$( "div[id^='ID']" ).hide();
						$( "#ID" + $( this ).text() ).show();
					});
 
				});
 
				$( 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.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		#boutons { position:relative; left:20px; }
		#texte { position:relative; left:80px; }
		#texte > div { display:none; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div id="boutons">
			<button>111</button>
			<button>112</button>
			<button>113</button>
		</div>
		<div id="texte">
			<div id="ID111">
				<p>1.1.1</p>
			</div>
			<div id="ID112">
				<p>1.1.2</p>
			</div>
			<div id="ID113">
				<p>1.1.3</p>
			</div>
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-05-29T22:29:24.860+02:00" pubdate>2013-05-29T22:29:24.860+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>

**Znojmo** · 30/05/2013, 01h27

Génial!

Je crois que ça va m'aider énormément!

Je laisse le sujet ouvert pour tout de suite mais je crois que je vais le marquer comme résolu bientôt!

Merci!

**Znojmo** · 30/05/2013, 02h08

D'accord je crois que je comprends.

Dans un premier temps on dit ''cacher toutes les DIV qui contiennent ID''

Puis on dit ''montrer la DIV qui s'appelle ID + le nom de ce bouton''

Ça répond à ma question. Sauf que...

En fait, il y a une partie de mon site où les boutons sont en fait des images. Y a-t-il moyen alors de fonctionner avec le ''name'' du bouton ou quelque chose comme ça? En plus j'ai des boutons qui comprennent un texte très grand, alors ça complique la programmation...

Désafficher-afficher en jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager