Discussion :

[latour500]

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 :

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

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 :

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
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+'">&nbsp;</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));

[danielhagnoul]

Bonsoir

Je propose le code ci-dessous, mais sans le contexte HTML impossible de le tester.

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
var jObjCT =  $( "[class^='ct_']" );
 
for ( var i = 0; i < 8; i++ ){
    $( '.ct_' + i ).prepend( '<div id="btn_close_' + i + '">&nbsp;</div>' );
};
 
 $( "[id^='btn_close_']" ).on( "click", function(){
    $( ".ct_" + this.id.slice(-1) ).fadeOut( "fast" );
});
 
jObjCT.on( "click", function(){
    return false;
});
 
$( "[id^='btn_']" ).on( "click", function(){
 
    jObjCT.fadeOut( "fast" );
 
    $( ".ct_" + this.id.slice(-1) ).fadeIn( "fast" );
});

[latour500]

Bonjour,

Merci de m'avoir répondu, cela ne fonctionne pas, j'ai un message 'ReferenceError: id is not defined' qui est valable
pour les deux " $( [id^='btn_'] ).on( "click", function(){ " , j'imagine qu'avec le html cela sera un peu plus facile, désolé de ne pas l'avoir posté avant.

Merci encore


Le html :

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
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
<div id="btn_0" class="btn_profil clair">
	<p>Christophe<strong>xxxxxx</strong>
	</p>
</div>
<div class="profil_content ct_0">{loadposition pos_profil_texte_0 }</div>
<div id="btn_1" class="btn_profil">
	<p>Expérience</p>
</div>
<div class="profil_content ct_1">{loadposition pos_profil_texte_1 }</div>
<div id="btn" class="btn_profil clair">&nbsp;</div>
<div id="btn_2" class="btn_profil">
	<p>Valeurs</p>
</div>
<div class="profil_content ct_2">{loadposition pos_profil_texte_2 }</div>
<div id="btn" class="btn_profil vide">&nbsp;</div>
<div id="btn" class="btn_profil clair">&nbsp;</div>
<div id="btn_3" class="btn_profil">
	<p>Vérités</p>
</div>
<div class="profil_content ct_3">{loadposition pos_profil_texte_3 }</div>
<div id="btn" class="btn_profil clair">&nbsp;</div>
<div id="btn_4" class="btn_profil">
	<p><span>Conditions<br />générales</span>
	</p>
</div>
<div class="profil_content ct_4">{loadposition pos_profil_texte_4 }</div>
<div id="btn_5" class="btn_profil">
	<p><span>Eco-<br />conception</span>
	</p>
</div>
<div class="profil_content ct_5">{loadposition pos_profil_texte_5 }</div>
<div id="btn_6" class="btn_profil">
	<p>Rémunération</p>
</div>
<div class="profil_content ct_6">{loadposition pos_profil_texte_6 }</div>
<div id="btn_7" class="btn_profil">
	<p><span>Appel<br />d'offres</span>
	</p>
</div>
<div class="profil_content ct_7">{loadposition pos_profil_texte_7 }</div>

(ne pas tenir compte des {loadposition...} )

[danielhagnoul]

Il manque les " : $( "[id^='btn_']" ).

[latour500]

Merci pour ton code, cela fonctionne presque bien, mais les boutons 'close' ne fonctionne pas correctement, en cliquant dessus, la div disparait et elle revient et ce sur tous les boutons
de fermeture. Et cela ne ferme pas non plus les autres div visibles.

J'imagine que ce que je demande n'est au final pas évident.

Merci encore

[danielhagnoul]

Je viens de regarder votre code HTML, la règle d'or : "un ID doit être unique dans la page" n'est pas respectée !

Plusieurs éléments du DOM ont l'attribut : id="btn".

[latour500]

Ah merci, oui je m'étais dis que je devais changer cela mais je ne l'ai pas fais, j'essaye tout à l'heure en modifiant ces ID identiques, et je fais un retour d'info.

Merci encore

[latour500]

Re,

Je viens de tester en renommant mes ID pour que le nommage ne soit pas identique, cela ne change rien,quand je clique sur une croix pour fermer, le Div commence à disparaitre et revient de suite,
et quand j'en ai ouvert plusieurs aucun de ne ferme.

Bon ben merci quand même, en php j'aurai su le faire, mais là je vais laisser sans l'optimisation tant pis, cela marche très bien ainsi.
(je ferais peut être un test juste en php + JS pour voir si pas d'autre conflit)

Merci beaucoup de t'être penché sur ma demande.

D'avance bon week-end