Afficher cacher div

**luangue** · 27/10/2015, 23h34

Bonjour, voici un code qui permet d'afficher et de cacher une div en fonction d'un id

Code :

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

1
2
3
4
5
6
7
8
 
$('#reserver1').click(function(){
    $('#cacherreserver1').fadeToggle("fast","linear");
});
 
$('#reserver2').click(function(){
    $('#cacherreserver2').fadeToggle("fast","linear");
});

le problème c'est que je suis obliger de créer une fonction et 2 id à chaque fois. Je cherche à réaliser les même fonction en une seule, c'est à dire que dans mon html je rajouterais un chiffre et mon script pourra faire apparaître cacherreserver10 si je clique sur reserver10 et ne fera pas apparaître un autre id cacherreserver[i]. J'ai penser à un tableau... je ne suis pas un expert en JQuery :/

Merci pour votre aide

Invité · 27/10/2015, 23h51

Bonjour,

Avec une class et un attribut data-id.

**luangue** · 28/10/2015, 00h07

Bonjour jreaux62,

merci de ta réponse, je ne trouve pas beaucoup d'info sur les data-id mais j'en est déjà utiliser sans vraiment aller plus loin.
j'ai tester ceci :

Code :

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

1
2
3
4
5
 
$('.reserveraction').click(function(){
var num = $(this).attr("data-id");
    $('#cacherreserver'+num).fadeToggle("fast","linear");
});

ça fonctionne mais je pense qu'il peut être amélioré :p

ce qui me permet dans mon html de faire <a data-id="2" class="reserveraction"> qui fait apparaître <div id="cacherreserver2">
je n'est pas trouver comment faire apparaître" cacherreserver" en fonction d'un "data-id"
exemple :
<a data-id="2" class="reserveraction"> pour faire apparaître <div data-id="2" id="cacherreserver">
<a data-id="3" class="reserveraction"> pour faire apparaître <div data-id="3" id="cacherreserver">
<a data-id="4" class="reserveraction"> pour faire apparaître <div data-id="4" id="cacherreserver">

je vais chercher mais si quelqu'un peut m'orienter ça serait sympa ^.^

**ABCIWEB** · 28/10/2015, 06h41

Par 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Afficher/cacher des blocs</title>
<script src="//code.jquery.com/jquery-1.11.2.js"></script>
<script>
$(function(){                 
	$(".reserveraction").on('click',function()
	{
		var that = $(this);
		$(".cacherreserver").each(function()
		{
		   if($(this).data("id") == that.data("id")) {$(this).fadeToggle( "fast", "linear" )}
		})
	});
});
</script>
<style type="text/css">
.reserveraction
{
	text-decoration:underline;
	cursor:pointer;
	display:inline-block;/* sert juste pour définir une marge entre les éléments en ligne*/
	margin-right:2em;
}
.cacherreserver
{
	display:none;
	border:1px solid black;
}
</style>
</head>
<body>
<span data-id="2" class="reserveraction"> pour faire apparaître ou disparaître 2</span>
<span data-id="3" class="reserveraction"> pour faire apparaître ou disparaître 3</span>
<span data-id="4" class="reserveraction"> pour faire apparaître ou disparaître 4</span>
 
<div data-id="2" class="cacherreserver">2</div>
<div data-id="3" class="cacherreserver">3</div>
<div data-id="4" class="cacherreserver">4</div>
</body>
</html>

EDIT : Et si tu ne modifies pas le DOM dynamiquement ce sera un peu plus optimisé de ne chercher les éléments "cacherreserver" qu'une fois.
Soit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
$(function(){
	var cacherreserver = $(".cacherreserver");
	$(".reserveraction").on('click',function()
	{
		var that = $(this);
		cacherreserver.each(function()
		{
		   if($(this).data("id") == that.data("id")) {$(this).fadeToggle( "fast", "linear" )}
		})
	});
});
</script>

**luangue** · 28/10/2015, 09h24

ça fonctionne parfaitement merci beaucoup

Invité · 28/10/2015, 09h27

Bonjour,
la solution dépend du contexte. Ici, de la position relative des éléments.

1/ pour moi, cette solution fonctionne très bien, quand les div sont éloignés (position relative difficile à définir, ou variable) :

Code html :

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

1
2
3
<a class="reserveraction" data-id="2"> ........ <div id="cacherreserver_2">
<a class="reserveraction" data-id="3"> ......... <div id="cacherreserver_3">
<a class="reserveraction" data-id="4"> ......... <div id="cacherreserver_4">

Code javascript :

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

1
2
3
$('.reserveraction').on( 'click', function(){
    $('#cacherreserver_'+$(this).attr('data-id')).fadeToggle('fast','linear');
});

2/ quand les div sont dans une structure définie... on peut utiliser les fonctions jQuery parent(), siblings(), next(),..... pour accéder à la cible :
Ex.

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
<article>
   <a class="reserveraction">...</a>
   ....
   <div class="cacherreserver">...</div>
</article>
<article>
   <a class="reserveraction">...</a>
   ....
   <div class="cacherreserver">...</div>
</article>
<article>
   <a class="reserveraction">...</a>
   ....
   <div class="cacherreserver">...</div>
</article>

Dans cet exemple :

Code javascript :

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

1
2
3
$('.reserveraction').on( 'click', function(){
    $(this).siblings('cacherreserver').fadeToggle('fast','linear'); // on cible l'élement "frère" (contenu dans <article>)
});

**luangue** · 28/10/2015, 13h27

Effectivement ta proposition est inintéressante, je te remercie pour ce complément d'information.

**ABCIWEB** · 28/10/2015, 16h51

la solution dépend du contexte. Ici, de la position relative des éléments.

Je me permets de préciser un peu pour les débutants qui liraient ce sujet.

Si on choisi une solution qui dépend du contexte, en particulier de la position relative des éléments, il faudra que ce contexte soit toujours identique.
Cela implique que si on modifie le html (par exemple simplement la position des éléments), on devra aussi modifier le javascript correspondant. Bref on est loin d'un code "générique". Cependant, en contre partie, le code sera plus efficace, il prendra moins de ressources pour s'exécuter puisque la recherche est moins longue à faire.

On peut dire que la solution la plus efficace en terme de performance dépend de la position relative des éléments, mais d'une manière plus générale il faut d'abord penser au contexte de l'utilisation et de l'évolution du code.

Aussi ma position est plutôt de d'abord faire du code le plus générique possible, et dans certains cas particuliers bien réfléchis - parce que cela va imposer des contraintes fortes en termes d'évolution du code - préférer la performance en ciblant les éléments au plus près, en relatif

Afficher cacher div

jQuery

Vue hybride

Discussions similaires

Partager

Partager