Discussion :

[iThinkWeb]

Bonjour,

je suis entrain d'apprendre à développer le jQuery et en se moment j'essaie de faire afficher et cacher plusieurs textes qui sont situé dans des balises articles.

Je souhaite qu'il s'affiche séparément lorsqu'on clique sur leur titre.



Je trouve que mon code de jQuery est très long et très répétitif, cependant je ne trouve pas de moyen de l'optimiser et je me demande s'il est possible de l'optimiser...

Si oui, comment ?

Voici ce que ça donne : http://razia.site90.com/js/ (cliquer sur le titre de la série pour afficher des informations)



Code jQuery

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
$(document).ready(function(){  
	$('div[class]').hide();
	$('.afficherbbt').click(function () {
		$('.bbt').slideToggle('fast');
		return false;
	});
	$('.afficherbe').click(function () {
		$('.be').slideToggle('fast');
		return false;
	});
	$('.afficherbb').click(function () {
		$('.bb').slideToggle('fast');
		return false;
	});
	$('.afficherca').click(function () {
		$('.ca').slideToggle('fast');
		return false;
	});
	$('.afficherde').click(function () {
		$('.de').slideToggle('fast');
		return false;
	});
	$('.affichergot').click(function () {
		$('.got').slideToggle('fast');
		return false;
	});
	$('.affichergirls').click(function () {
		$('.girls').slideToggle('fast');
		return false;
	});
	$('.affichergw').click(function () {
		$('.gw').slideToggle('fast');
		return false;
	});
	$('.afficherhome').click(function () {
		$('.home').slideToggle('fast');
		return false;
	});
	$('.afficherhoc').click(function () {
		$('.hoc').slideToggle('fast');
		return false;
	});
	$('.affichermm').click(function () {
		$('.mm').slideToggle('fast');
		return false;
	});
	$('.afficherng').click(function () {
		$('.ng').slideToggle('fast');
		return false;
	});
	$('.affichertp').click(function () {
		$('.tp').slideToggle('fast');
		return false;
	});
	$('.afficherwd').click(function () {
		$('.wd').slideToggle('fast');
		return false;
	});
	$('.afficherwire').click(function () {
		$('.wire').slideToggle('fast');
		return false;
	});
});

Merci,

iThink.

[danielhagnoul]

Bonsoir

Voir : http://api.jquery.com/?s=attribut

Code :

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

1
2
3
4
5
$( "a[class^='afficher']" ).on( "click", function(){
    $( "div." + $( this ).attr( "class" ).slice( 8 ) ).slideToggle( 'fast' );
 
    return false;
});

[Bovino]

On peut aussi utiliser les attributs data-* pour ça :

Code html :

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

<div class="afficher" data-affiche="bbt">...</div>

et

Code :

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

1
2
3
4
$('.afficher'.on('click', function(event){
    $('.'+$(this).data('affiche')).slideToggle('fast');
    event.preventDefault();
});

[danielhagnoul]

Code :

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

1
2
3
4
 $('.afficher').on('click', function(event){
    $('.'+$(this).data('affiche')).slideToggle('fast');
    event.preventDefault();
});