Optimisation code jQuery

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:

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.

Bonsoir

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

Code:

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

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

Code:

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

et
Code:

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

Code:

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