Optimisation code avec une boucle For
Bonjour à tous,
Je suis en train de développer un code JS, qui n'est pas optimisé et donc j'aimerai vos conseils. (mais il fonctionne parfaitement)
Sa fonction est de faire apparaitre différentes DIV quand on clique sur différent 'bouton' (qui sont des DIVs aussi)
Les différents DIV de contenu sont définis avec une Class ct_(nb) , donc mon premier contenu s'affichera en cliquant sur l'élément (le bouton) qui à l'ID '#ct_1' qui fera apparaitre le DIV de contenu qui à la Class '.ct_1' , la boucle For avec la variable 'J' me permet de ne plus rendre visible les autres DIV de contenu (ct_1,ct_2,ct_3 etc..)(note: je devrais passer la variable J à 1 et non pas à zéro)..
Bref j'ai testé de faire une boucle qui m'incrémente mes ID et Class dans le style avec la variable 'I' mais cela ne fonctionne pas enfin je me retrouve
avec mes boutons qui affichent tous la dernières div qui a la class -> '.ct_7'
Donc j'aimerai votre avis pour l'optimiser en boucle si c'est faisable.
Merci d'avance
Mon code dans ma boucle que j'ai testé qui ne fonctionne pas correctement (tous mes boutons affichent la dernière DIV avec la class '.ct_7' )
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$('.ct_'+i).click(function() { return false; });
$('#btn_'+i).click(function(){
for (var j = 0; j<8; j++) {
$('.ct_'+j).fadeOut('fast');
};
$('.ct_'+i).fadeIn('fast', function() {
$('#btn_close_'+i').click(function(){
$('.ct_'+i).fadeOut('fast');
});
});
}); |
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
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
| (function($) {
$(window).load(function(){
var nb_element_de_class;
nb_element_de_class=$(".ma_classe").length;
//intégre les boutons de fermeture dans les contenus
for (var i = 0; i<8; i++) {
$('.ct_'+i).prepend('<div id="btn_close_'+i+'"> </div>');
};
$('.ct_1').click(function() { return false; });
$('#btn_1').click(function(){
for (var j = 0; j<8; j++) {
$('.ct_'+j).fadeOut('fast');
};
$('.ct_1').fadeIn('fast', function() {
$('#btn_close_1').click(function(){
$('.ct_1').fadeOut('fast');
});
});
});
$('.ct_2').click(function() { return false; });
$('#btn_2').click(function(){
for (var j = 0; j<8; j++) {
$('.ct_'+j).fadeOut('fast');
};
$('.ct_2').fadeIn('fast', function() {
$('#btn_close_2').click(function(){
$('.ct_2').fadeOut('fast');
});
});
});
$('.ct_3').click(function() { return false; });
$('#btn_3').click(function(){
for (var j = 0; j<8; j++) {
$('.ct_'+j).fadeOut('fast');
};
$('.ct_3').fadeIn('fast', function() {
$('#btn_close_3').click(function(){
$('.ct_3').fadeOut('fast');
});
});
});
$('.ct_4').click(function() { return false; });
$('#btn_4').click(function(){
for (var j = 0; j<8; j++) {
$('.ct_'+j).fadeOut('fast');
};
$('.ct_4').fadeIn('fast', function() {
$('#btn_close_4').click(function(){
$('.ct_4').fadeOut('fast');
});
});
});
$('.ct_5').click(function() { return false; });
$('#btn_5').click(function(){
for (var j = 0; j<8; j++) {
$('.ct_'+j).fadeOut('fast');
};
$('.ct_5').fadeIn('fast', function() {
$('#btn_close_5').click(function(){
$('.ct_5').fadeOut('fast');
});
});
});
$('.ct_6').click(function() { return false; });
$('#btn_6').click(function(){
for (var j = 0; j<8; j++) {
$('.ct_'+j).fadeOut('fast');
};
$('.ct_6').fadeIn('fast', function() {
$('#btn_close_6').click(function(){
$('.ct_6').fadeOut('fast');
});
});
});
$('.ct_7').click(function() { return false; });
$('#btn_7').click(function(){
for (var j = 0; j<8; j++) {
$('.ct_'+j).fadeOut('fast');
};
$('.ct_7').fadeIn('fast', function() {
$('#btn_close_7').click(function(){
$('.ct_7').fadeOut('fast');
});
});
});
});
}(jQuery)); |
