Afficher cacher div

Version imprimable

27/10/2015, 23h34
luangue

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

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
27/10/2015, 23h51
Invité

Bonjour,

Avec une class et un attribut data-id.
28/10/2015, 00h07
luangue
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:

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 ^.^

Par exemple :

Code:

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:

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>

28/10/2015, 09h24
luangue

ça fonctionne parfaitement merci beaucoup

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:

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:

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:

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:

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

28/10/2015, 13h27
luangue

Effectivement ta proposition est inintéressante, je te remercie pour ce complément d'information.
28/10/2015, 16h51
ABCIWEB

Citation:

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 :D
28/10/2015, 17h18
Invité

A mon avis, la solution la plus "générique" et simple et performante est la 1/, fournie ici, puisqu'on va cibler un id (forcément unique).
28/10/2015, 19h04
ABCIWEB

Salut jreaux62 :)

Oui je répondais principalement par rapport à ta seconde solution.

Concernant la première et pour les performances c'est certain, par contre générique et simple c'est discutable, je m'en explique ici. Certes le contexte est différent mais d'une "manière générale" il faut éviter la prolifération systématique des id si c'est uniquement pour cibler des éléments en javascript. Simplement pour dire aux débutants de ne pas s'enfermer dans cette méthode qui est souvent utilisée par facilité (un peu comme un réflexe) mais qui a des limites/inconvénients.

Pour le côté générique ensuite, je préfère la solution qui propose le plus de symétrie. Dans mon exemple le code html pour générer le lien et sa cible sont construits d'une manière strictement identique. C'est juste la classe qui permet d'accorder les éléments.

Dans ton cas il faut construire un id sur mesure. Tu vas me dire qu'on pourra toujours se débrouiller pour le faire (puisqu'il nécessite les mêmes informations) mais d'une manière générale ce sera moins maniable/lisible/facile et donc moins générique. Par exemple, si on a besoin de formater les éléments cibles en css d'une manière générique on aura besoin d'utiliser une classe, donc on va finir quand même par avoir besoin d'un id + une classe. Là tu perds un premier avantage de ta solution en alourdissant un peu le html. Ensuite si on modifie plus tard le DOM en ajoutant des éléments de manière dynamique il va falloir faire attention à l'éventuel problème des duplicates ID, et puis faudra jongler si on veux faire du clonage. Bref il est difficile de considérer que cette solution est la plus générique si on considère que le générique permet de faire évoluer le code avec un minimum de contraintes.

(Au passage, ton dernier lien ne fonctionne pas)