Action unique d'un bouton sur des div de même class

**artenis** · 30/09/2013, 14h01

Bonjour,

je cherche à créer une action unique d'un bouton répéter plusieurs fois dans plusieurs conteneurs afin d'afficher un bloc et de cacher un autre bloc, chacun disposant d'une class.
<conteneur>
bouton1 -> affiche bloc2 et cache bloc1
bouton2 -> affiche bloc1 et cache bloc2
</conteneur

Le problème qui se pose (logique) c'est que lorsque je clique sur le bouton tout les blocs/div de tous les conteneurs s'affichent et s'effacent en même temps.
Je voudrais que seul le bouton contenu dans le conteneur fasse effet sur les blocs/div de ce conteneur et pas des autres.

Je essayé avec la fonction "each" mais soit je m'y prends mal, soit il ne s'agit pas de la fonction adéquate.

Pourquoi : parce qu'il s'agit d'une boucle (wordpress) et que je ne peux pas attribuer un id différent à chaque div de chaque conteneur , parfois il peut y avoir 45 conteneurs sur la même page !

j'espère avoir été conscis!

**elfamine** · 30/09/2013, 14h22

Bonjour,

Sans avoir vu ton code ca va etre difficile de te conseiller... mais en un mot ce que tu cherche c'est this

**artenis** · 30/09/2013, 15h54

Merci pour ce conseil, mais je ne connais que le "this" selector et je ne vois pas comment l'utiliser pour désigner uniquement la class de la div du premier conteneur (par exemple)!

voici mon code mais avec children :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
 
	$('#links-Description').click(function()){
		$(this).children('.InfosPratiques').hide();
		$(this).children('.Descriptions').show();
	});
	$('#links-InfosPratiques').click(function()){
		$(this).children('.Descriptions').hide();
		$(this).children('.InfosPratiques').show();
	});
 
});

et voici ce que j'ai trouvé sur le net (la fonction "next" , mais je n'y comprends rien et surtout ne sais pas si cela convient réellement à mon problème ! si c'est la réponse à mon problème serait-il possible de me l'expliquer

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
function open_menu($this) {
    $this.next('ul.sub-menu').css('display', 'block').stop(true, false).animate({
        width: '235px',
    }, 500);
}
 
function close_menu() {
    // close code here
}
 
status = 'closed'; // set the default menu status
 
$('a').click(function() {
    switch(status) {
        case 'closed':
            open_menu($(this));
            break;
        case 'open':
            close_menu();
            break;
    }
}

**elfamine** · 30/09/2013, 16h06

Deja 1ere observation on ne peut y avoir plusieurs boutons avec le meme id, la meme class oui...mais pas le meme id

Est ce qu'on peut voir ton code html stp

?

**artenis** · 30/09/2013, 16h24

Code HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class="activity_list_text">
	<div class="Descriptions"><?php the_content(); ?></div>
	<div class="InfosPratiques"><?php echo get_post_meta($post->ID,'Telephone',true) ?></div>
</div>
<div class="activity_list_links">
	<ul>
		<li class="links-Description">Description</li>
		<li class="links-InfosPratiques">Infos pratiques</li>
	</ul>
</div>

Le script jquery qui refonctionne, mais toujours pas action unique sur un conteneur, lorsque j'appuie sur un des booutons, tous les blocs de tous les conteneurs s'affichent ou s'effacent !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
 
	$('.links-Description').click(function(){
 
		$('.activity_list_text').children('.InfosPratiques').hide();
		$('.activity_list_text').children('.Descriptions').show();
	});
	$('.links-InfosPratiques').click(function(){
 
		$('.activity_list_text').children('.Descriptions').hide();
		$('.activity_list_text').children('.InfosPratiques').show();
	});
 
});

**elfamine** · 30/09/2013, 16h53

c'est normal que

Code javascript :

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

$(this).children('.InfosPratiques').hide();

ne fonctionne pas puisque .InfosPratiques n'est pas un descendant de l'element clickable.

quel est code html generé par ton php ?

Code php :

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

1
2
3
 
php the_content();
echo get_post_meta($post->ID,'Telephone',true);

**artenis** · 30/09/2013, 17h11

Voici un des conteneurs: (generation php)
Par contre je ne vois pas l'interêt de connaitre le contenu du texte generer par le php pour m'aider dans un probleme de Jquery

le contenu s'affiche très bien, le jquery ne fonctionne pas

Avez-vous vu le dernier code avec la class du conteneur (bloc activity list)?

merci de ton aide

Code html :

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
<div id="section_content_sheet">
<div class="Title_bloc_Activity"><strong>contenu</strong></div>
<div class="Bloc_activity_presentation">
	<div class="activity_presentation">
		<div class="activity_presentation_img">contenu</div>
		<div class="activity_presentation_number">contenu</div>
	</div>
	<div class="activity_presentation_text">contenu
</div>
</div>
 
<div class="Title_bloc_Activity">contenu</div>
 
<div class="Bloc_activity_list">
	<div class="activity_list">
		<div class="activity_list_img"><img width="150" height="134" src="http://image" class="attachment-post-thumbnail wp-post-image" alt="" /></div>
		<div class="activity_list_resume">
			<div class="activity_list_title">contenu </div>
			<div class="activity_list_text">
				<div class="Descriptions">contenu
</div>
				<div class="InfosPratiques">
					<div class="Contact_Activity normal">
						<div class="Title_Contact_Activity">Contact <hr style="float:left; width:90%; margin:6px 0; background:#3982c7; height:2px;"/></div>
						<div class="text_Contact_Activity">
							contenu
						</div>
					</div>
					<div class="Contact_Activity petit">
						<div class="Title_Contact_Activity">contenu</div>
						<div class="text_Contact_Activity">
						contenu</div>
					</div>
					<div class="Contact_Activity normal">
						<div class="Title_Contact_Activity">contenu</div>
						<div class="text_Contact_Activity">
						<table><tr><td valign="top">contenu</td></tr></table>
						</div>
					</div>
 
				</div>
			</div>
		</div>
		<div class="activity_list_links">
			<ul>
			<li class="links-Description">Description</li>
			<li class="links-InfosPratiques">Infos pratiques</li>
			</ul>
		</div>
	</div>
</div>

**elfamine** · 30/09/2013, 18h25

Tes éléments clickables sont dans un block indépendant du block qui contient les éléments que tu souhaite afficher/cacher. donc utiliser des fonction genre children() ou find() n'est pas ideal dans ton cas.

Il n'y a aucun lien logique entre les deux. si les éléments étaient dissociables ...s'il se trouvais dans une div avec un id unique, id qu'on retrouverais dans l'attribut href du bouton.. ca aurait etait idéal.

tu peux toujours commencer par une fonction qui va mettre des class numéroté à tes .activity_list_text

Code javascript :

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

1
2
3
4
5
6
7
 
$(document).ready(function () {
    $('.activity_list_text').each(function (i) {
        var classname = "item"+i;
        $(this).addClass(classname);
    });
});

**artenis** · 30/09/2013, 22h15

Elfamine

j'ai compris le raisonnement mais ne suis pas sûr de comprendre le fonctionnement du code :
il s'agirait ici d'ajouter un chiffre (incrémenter de +1) à la class de chaque conteneur affiché?
donc par la suite il faudrait récupérer la class avec sa valeur unique (j'aurais besoin d'explication car ça devient compliquer) et lui appliquer la fonction souhaitée !

je me demandais si je pouvais contourner cette difficulté (pour moi) en ajoutant (addClass) une class au survol (mouseenter) du conteneur par le curseur, et de poser une condition sur cette class ( if(hasClass()) ) et en selectionnant les enfants (children) des sous class (description et infospratiques) et j'y applique mes fonctions ? biensûr il faudrait supprimer la class dès que l'on sort du conteneur !

sinon je suis prêt à apprendre, si tu en as le temps
je prendrais volontiers le script le plus court et le plus efficace !

je pose quand même la question : serait-il possible et plus simple de résoudre mon problème avec du css3 ? car j'ai remarqué que la nouvelle norme permet de séléectionner plus facilement les parents et enfants d'un conteneur ! je crois ?

**elfamine** · 01/10/2013, 14h29

Je pars du principe que les éléments que tu souhaite manipuler avec jQuery sont indissociables, les bouton n'encapsule pas tes éléments (ou vise versa)...et tu n'as pas la main sur les fichiers php (si j'ai bien compris).

Code html :

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
 
<div class="content">
<div class="item-a"></div>
<div class="item-b"></div>
</div>
<div class="content">
<div class="item-a"></div>
<div class="item-b"></div>
</div>
<div class="content">
<div class="item-a"></div>
<div class="item-b"></div>
</div>
...
<div class="nav">
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
...
</div>

Il me semble que ton html est agencé de cette facon.

Maintenant la solution à laquelle j'ai pensé :

1 - parcourir ton html pour chercher les éléments content et leurs attribuer une class numéroté

Code javascript :

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

1
2
3
4
5
 
$('.content').each(function (i) {
        var className = "item-"+i;
        $(this).addClass(className);
    });

2 - j'applique la meme logique pour les boutons, sauf qu'au lieu d'une class j'affecte un id

Code javascript :

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

1
2
3
4
5
 
$('.menu').each(function (i) {
        var idName = "item-"+i;
        $(this).attr('id', idName);
    });

pour avoir ce résultat :

Code html :

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
 
<div class="content item-0">
<div class="item-a"></div>
<div class="item-b"></div>
</div>
<div class="content item-1">
<div class="item-a"></div>
<div class="item-b"></div>
</div>
<div class="content item-2">
<div class="item-a"></div>
<div class="item-b"></div>
</div>
...
<div class="nav">
<div class="menu"  id="item-0"></div>
<div class="menu"  id="item-1"></div>
<div class="menu"  id="item-2"></div>
...
</div>

3 - maintenant il ne reste plus qu'à gérer le on click

Code javascript :

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

1
2
3
4
5
6
7
 
 $('.menu').on('click', function () {
//ex : idName = item-0
        var idName = $(this).attr('id');
        $('.' + idName).find('.item-a,.item-b').toggle();
//ex $('.item-0')...
    });

Aller on recap : pour tester ce code

Code html :

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
 
<div class="content">
    <div class="item-a">content a</div>
    <div class="item-b">content b</div>
</div>
<div class="content">
    <div class="item-a">content a</div>
    <div class="item-b">content b</div>
</div>
<div class="content">
    <div class="item-a">content a</div>
    <div class="item-b">content b</div>
</div>
<div class="nav">
    <div class="menu">bouton</div>
    <div class="menu">bouton</div>
    <div class="menu">bouton</div>
</div>
<div class="test"></div>

Code css :

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

1
2
3
4
 
.item-b {
    display:none;
}

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
17
 
$(document).ready(function () {
    $('.content').each(function (i) {
        var className = "item-" + i;
        $(this).addClass(className);
    });
    $('.menu').each(function (i) {
        var idName = "item-" + i;
        $(this).attr('id', idName);
    });
 
    $('.menu').on('click', function () {
        var idName = $(this).attr('id');
        $('.' + idName).find('.item-a,.item-b').toggle();
    });
 
});

maintenant si le code est compréhensible il ne reste plus qu'à l'adapter et ca devrait normalement fonctionner

**danielhagnoul** · 02/10/2013, 11h46

Bonjour

@elfamine !

La clé du problème c'est la méthode parents().

----------------------

Réponse au message n° 1 en tenant compte du code des messages 5 et 7.

Pour tester, il suffit de copier-coller ma page de test.

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
<!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(){
 
	/*
	 * Cacher tous les éléments
	 * à l'ouverture de la page
	 */
	$( ".InfosPratiques" ).hide();
	$( ".Descriptions" ).hide();
 
	$( ".links-Description" ).on( "click", function(){
 
		/*
		 * Cacher tous les éléments ouverts
		 */
		$( ".InfosPratiques" ).hide();
		$( ".Descriptions" ).hide();
 
		/*
		 * Trouver dans les parents de this, l'élément 
		 * ayant la classe "Bloc_activity_list".
		 */
		var jObjParent = $( this ).parents( ".Bloc_activity_list" );
 
		/*
		 * Cacher les informations.
		 * Ouvrir la description.
		 */
		jObjParent.find( ".InfosPratiques" ).hide();
		jObjParent.find( ".Descriptions" ).show();
	});
 
	$( ".links-InfosPratiques" ).on( "click", function(){
 
		/*
		 * Cacher tous les éléments ouverts
		 */
		$( ".InfosPratiques" ).hide();
		$( ".Descriptions" ).hide();
 
		/*
		 * Trouver dans les parents de this, l'élément 
		 * ayant la classe "Bloc_activity_list".
		 */
		var jObjParent = $( this ).parents( ".Bloc_activity_list" );
 
		/*
		 * Ouvrir les informations.
		 * Cacher la description.
		 */
		jObjParent.find( ".InfosPratiques" ).show();
		jObjParent.find( ".Descriptions" ).hide();
	});
 
});
 
$( 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 à 10 px, voir dvjhRemBase.css */
 
		li { margin-left: 2.4rem; }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<div id="section_content_sheet">
 
	<div class="Title_bloc_Activity">
		<p><strong>contenu Title_bloc_Activity</strong></p>
	</div>
	<div class="Bloc_activity_presentation">
		<div class="activity_presentation">
			<div class="activity_presentation_img">
				<p>contenu activity_presentation_img</p>
			</div>
			<div class="activity_presentation_number">
				<p>contenu activity_presentation_number</p>
			</div>
		</div>
		<div class="activity_presentation_text">
			<p>contenu activity_presentation_text</p>
		</div>
	</div>
	<div class="Title_bloc_Activity">
		<p>contenu Title_bloc_Activity</p>
	</div>
	<div class="Bloc_activity_list">
		<div class="activity_list">
			<div class="activity_list_img">
				<p>contenu activity_list_img</p>
			</div>
			<div class="activity_list_resume">
				<div class="activity_list_title">
					<p>contenu activity_list_title</p>
				</div>
				<div class="activity_list_text">
					<div class="Descriptions">
						<p>contenu Descriptions</p>
					</div>
					<div class="InfosPratiques">
						<div class="Contact_Activity normal">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
						<div class="Contact_Activity petit">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
						<div class="Contact_Activity normal">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="activity_list_links">
				<ul>
					<li class="links-Description">Description</li>
					<li class="links-InfosPratiques">Infos pratiques</li>
				</ul>
			</div>
		</div>
	</div>
 
	<div class="Title_bloc_Activity">
		<p><strong>contenu Title_bloc_Activity</strong></p>
	</div>
	<div class="Bloc_activity_presentation">
		<div class="activity_presentation">
			<div class="activity_presentation_img">
				<p>contenu activity_presentation_img</p>
			</div>
			<div class="activity_presentation_number">
				<p>contenu activity_presentation_number</p>
			</div>
		</div>
		<div class="activity_presentation_text">
			<p>contenu activity_presentation_text</p>
		</div>
	</div>
	<div class="Title_bloc_Activity">
		<p>contenu Title_bloc_Activity</p>
	</div>
	<div class="Bloc_activity_list">
		<div class="activity_list">
			<div class="activity_list_img">
				<p>contenu activity_list_img</p>
			</div>
			<div class="activity_list_resume">
				<div class="activity_list_title">
					<p>contenu activity_list_title</p>
				</div>
				<div class="activity_list_text">
					<div class="Descriptions">
						<p>contenu Descriptions</p>
					</div>
					<div class="InfosPratiques">
						<div class="Contact_Activity normal">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
						<div class="Contact_Activity petit">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
						<div class="Contact_Activity normal">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="activity_list_links">
				<ul>
					<li class="links-Description">Description</li>
					<li class="links-InfosPratiques">Infos pratiques</li>
				</ul>
			</div>
		</div>
	</div>
 
	<div class="Title_bloc_Activity">
		<p><strong>contenu Title_bloc_Activity</strong></p>
	</div>
	<div class="Bloc_activity_presentation">
		<div class="activity_presentation">
			<div class="activity_presentation_img">
				<p>contenu activity_presentation_img</p>
			</div>
			<div class="activity_presentation_number">
				<p>contenu activity_presentation_number</p>
			</div>
		</div>
		<div class="activity_presentation_text">
			<p>contenu activity_presentation_text</p>
		</div>
	</div>
	<div class="Title_bloc_Activity">
		<p>contenu Title_bloc_Activity</p>
	</div>
	<div class="Bloc_activity_list">
		<div class="activity_list">
			<div class="activity_list_img">
				<p>contenu activity_list_img</p>
			</div>
			<div class="activity_list_resume">
				<div class="activity_list_title">
					<p>contenu activity_list_title</p>
				</div>
				<div class="activity_list_text">
					<div class="Descriptions">
						<p>contenu Descriptions</p>
					</div>
					<div class="InfosPratiques">
						<div class="Contact_Activity normal">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
						<div class="Contact_Activity petit">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
						<div class="Contact_Activity normal">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="activity_list_links">
				<ul>
					<li class="links-Description">Description</li>
					<li class="links-InfosPratiques">Infos pratiques</li>
				</ul>
			</div>
		</div>
	</div>
 
	<div class="Title_bloc_Activity">
		<p><strong>contenu Title_bloc_Activity</strong></p>
	</div>
	<div class="Bloc_activity_presentation">
		<div class="activity_presentation">
			<div class="activity_presentation_img">
				<p>contenu activity_presentation_img</p>
			</div>
			<div class="activity_presentation_number">
				<p>contenu activity_presentation_number</p>
			</div>
		</div>
		<div class="activity_presentation_text">
			<p>contenu activity_presentation_text</p>
		</div>
	</div>
	<div class="Title_bloc_Activity">
		<p>contenu Title_bloc_Activity</p>
	</div>
	<div class="Bloc_activity_list">
		<div class="activity_list">
			<div class="activity_list_img">
				<p>contenu activity_list_img</p>
			</div>
			<div class="activity_list_resume">
				<div class="activity_list_title">
					<p>contenu activity_list_title</p>
				</div>
				<div class="activity_list_text">
					<div class="Descriptions">
						<p>contenu Descriptions</p>
					</div>
					<div class="InfosPratiques">
						<div class="Contact_Activity normal">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
						<div class="Contact_Activity petit">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
						<div class="Contact_Activity normal">
							<div class="Title_Contact_Activity">
								<p>contenu Title_Contact_Activity</p>
							</div>
							<div class="text_Contact_Activity">
								<p>contenu text_Contact_Activity</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="activity_list_links">
				<ul>
					<li class="links-Description">Description</li>
					<li class="links-InfosPratiques">Infos pratiques</li>
				</ul>
			</div>
		</div>
	</div>
 
</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-09-28T00:20:27.88+02:00" pubdate>2013-09-28T00:20:27.88+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>

**elfamine** · 02/10/2013, 13h48

Au temps pour moi, j'ai mal lu le code html

**artenis** · 03/10/2013, 11h47

Bonjour Elfamine et Daniel Hagnoul,

un très grand merci pour vos réponses et solutions, et pour le temps que vous y avez passé.
les deux solutions me paraissent excellentes, je les test tout de suite.

**artenis** · 03/10/2013, 12h35

DanielHagnoul,

le code paraissait simple, mais comme déjà essayé auparavant, la function parent , ne fonctionne pas ou sinon il y a un autre problème.
qui viendrait apparemment des class .

et donc la solution de Elfamine, me semble plus logique , quoique j'ai eu dû mal à comprendre cette logique.

Elfamine,

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
 
<div class="content item-0">
<div class="item-a"></div>
<div class="item-b"></div>
</div>
<div class="content item-1">
<div class="item-a"></div>
<div class="item-b"></div>
</div>
<div class="content item-2">
<div class="item-a"></div>
<div class="item-b"></div>
</div>
...
<div class="nav">
<div class="menu"  id="item-0"></div>
<div class="menu"  id="item-1"></div>
<div class="menu"  id="item-2"></div>
...
</div>

le code marche parfaitement, mais il y a un petit hic, c'est que je voudrais du hide et du show sur les item-a et item-b, et j'ai deux boutons item-0 et item-1 : item-0 doit effacer item-b et afficher item-a, et pour item-1 l'inverse.

edit : desole: voici les class correspondantes :
content = activity_list_text
. menu #item-0 = .Links-Descriptions
.menu #item-1 = .Links-InfosPratiques
item-a = .Descriptions
item-b = .InfosPratiques

Voici a quoi ça devrait ressembler (mais ça marche pas

):

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
$('.activity_list_text').each(function (i) {
        var className = "item-" + i;
        $(this).addClass(className);
    });
    $('.Links-Descriptions,.Links-InfosPratiques').each(function (i) {
        var idName = "item-" + i;
        $(this).attr('id', idName);
    });
    $('.Links-Descriptions ').on('click', function () {
        var idName = $(this).attr('id');
        $('.' + idName).find('.InfosPratiques').hide();
	$('.' + idName).find('.Descriptions').show();
    });
	$('.Links-InfosPratiques').on('click', function () {
        var idName = $(this).attr('id');
        $('.' + idName).find('.Descriptions').show();
	$('.' + idName).find('.InfosPratiques').hide();
    });

Heu, avant de me donner (peut-être une solution), pourriez-vous m'expliquer pourquoi mon semblant de code ne marche pas ?

**artenis** · 03/10/2013, 15h24

Elfamine, tu es mon sauveur

voici le code qui marche (tout en bas):
J'ai remplacé les '.' par '#' puisque je sélectionne les id et non les class, et surtout, j'ai remplacé :

Code :

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

1
2
3
4
5
6
7
8
$('.content').each(function (i) {
        var className = "item-" + i;
        $(this).addClass(className);
    });
    $('.menu').each(function (i) {
        var idName = "item-" + i;
        $(this).attr('id', idName);
    });

Par ceci puisque j'etais dans une boucle :

Code :

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

<?php debut de ma boucle wordpress + $i = 0; ?>

et dans les balises qui m'interresait je rajoutait en php une id

Code :

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

1
2
3
4
5
 
<div class="activity_list_text" id="<?php echo "item-".$i; ?>">
 
<li class="Links-Descriptions" id="<?php echo "item-".$i; ?>">Description</li>
<li class="Links-InfosPratiques" id="<?php echo "item-".$i; ?>">Infos pratiques</li>

et à la fin :

Code :

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

<?php  fin boucle wordpress + $i++; ?>

Pourquoi, par ce que avec ton code , les class Links, se voyait attribué un id avec une valeur différente : item-0 et item-1, or il fallait qu'il y ait deux fois item-0.
Donc avec ton code précédent ( qui marchait très bien , mais qui ne correspondait pas entierement à mes attentes), lorsque je cliquais sur menu item-0 cela agissait bien sur le conteneur correspondant, mais sur menu item-1, cela agissait sur le second , or le menu item-1 devait agir sur le même conteneur qu'auparavant.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$('.Links-Descriptions').on('click', function () {
        var idName = $(this).attr('id');
	console.debug(idName);
        $('#' + idName).find('.InfosPratiques').hide();
	$('#' + idName).find('.Descriptions').show();
    });
    $('.Links-InfosPratiques').on('click', function () {
        var idName = $(this).attr('id');
        $('#' + idName).find('.Descriptions').hide();
	$('#' + idName).find('.InfosPratiques').show();
    });

Désolé je n'arrive pas à parler comme un informaticien, donc j'espère que tu as compris et merci du fond du coeur, car ça faisait 17 heures que je penchais dessus et j'étais au bord de la dépression

**elfamine** · 03/10/2013, 18h52

artenis pour etre tout à fait honnete avec toi...j'ai toujours du mal à imaginer l'agencement de ton code html

c'est pour ca que j'ai donné un code différent afin d'expliquer mon raisonnement. Si ca a pu t'aider et bien tant mieux

**danielhagnoul** · 04/10/2013, 01h43

Envoyé par artenis

DanielHagnoul,

le code paraissait simple, mais comme déjà essayé auparavant, la function parent , ne fonctionne pas ou sinon il y a un autre problème.
qui viendrait apparemment des class .

et donc la solution de Elfamine, me semble plus logique , quoique j'ai eu dû mal à comprendre cette logique.

Votre réflexion sur la méthode "parent" me laisse croire que ma proposition n'a été ni examinée ni testée. Sinon vous n'auriez pas manqué de voir que j'ai utilisé la méthode "parents" et non "parent".

Je ne poste jamais un code sans l'avoir testé sur au moins un navigateur (Chrome et Firefox généralement) donc je sais que ma solution fonctionne. Si elle ne convient pas, c'est que la structure de votre code réel ne correspond pas à celle des codes fournis.

Action unique d'un bouton sur des div de même class

jQuery

Discussions similaires

Partager

Partager