Page 1 sur 1

Factorisation du code avec une fonction

Posté : 14 oct. 2012, 14:54
par schim59
Bonjour,

je voudrais simplifier le code JQuery ci-dessous à l'aide d'une fonction svp.
Pouvez vous m'aider ?

D'avance merci.

[javascript]<script type="text/javascript">
$(document).ready(function(){
$("#cv").hide();
$("#competences").hide();
$("#resultats").hide();
$("#loisirs").hide();
$("#formation").hide();
$("#contacter").hide();
$("#moi").hide();

$("#cv_t").click(function(){
$("#cv").show()
$("#lettre_m").hide();
$("#competences").hide();
$("#loisirs").hide();
$("#formation").hide();
$("#contacter").hide();
$("#moi").hide();
});

$("#motivations_t").click(function(){
$("#cv").hide()
$("#lettre_m").show();
$("#competences").hide();
$("#loisirs").hide();
$("#formation").hide();
$("#contacter").hide();
$("#moi").hide();
});

$("#competence_t").click(function(){
$("#lettre_m").hide();
$("#competences").show();
$("#cv").hide();
$("#loisirs").hide();
$("#formation").hide();
$("#contacter").hide();
$("#moi").hide();
});

$("#loisirs_t").click(function(){
$("#lettre_m").hide();
$("#competences").hide();
$("#cv").hide();
$("#loisirs").show();
$("#formation").hide();
$("#contacter").hide();
$("#moi").hide();
});

$("#formation_t").click(function(){
$("#lettre_m").hide();
$("#competences").hide();
$("#cv").hide();
$("#loisirs").hide();
$("#contacter").hide();
$("#formation").show();
$("#moi").hide();
});

$("#contacter_t").click(function(){
$("#lettre_m").hide();
$("#competences").hide();
$("#cv").hide();
$("#loisirs").hide();
$("#contacter").show();
$("#formation").hide();
$("#moi").hide();
});

$("#titre").click(function(){
$("#lettre_m").hide();
$("#competences").hide();
$("#cv").hide();
$("#loisirs").hide();
$("#contacter").hide();
$("#formation").hide();
$("#moi").show();
});
});
</script>[/javascript]

Re: Factorisation du code avec une fonction

Posté : 18 oct. 2012, 21:06
par Aureusms
Attention pas testé [javascript]<script type="text/javascript">
var tab = ["cv", "competences", "resultats", "loisirs", "formation", "contacter" , "moi", "lettre_m"];

$(document).ready(function(){
for (var i=0 ; i < tab.length; i++)
$('#'+tab).hide();
$("#lettre_m").show();


$("#cv_t").click(function(){
for (var i=0 ; i < tab.length; i++)
$('#'+tab).hide();
$("#cv").show();
});

$("#motivations_t").click(function(){
for (var i=0 ; i < tab.length; i++)
$('#'+tab).hide();
$("#lettre_m").show();
});

$("#competence_t").click(function(){
for (var i=0 ; i < tab.length; i++)
$('#'+tab).hide();
$("#competences").show();
});

$("#loisirs_t").click(function(){
for (var i=0 ; i < tab.length; i++)
$('#'+tab).hide();
$("#loisirs").show();
});

$("#formation_t").click(function(){
for (var i=0 ; i < tab.length; i++)
$('#'+tab).hide();
$("#formation").show();
});

$("#contacter_t").click(function(){
for (var i=0 ; i < tab.length; i++)
$('#'+tab).hide();
$("#contacter").show();
});

$("#titre").click(function(){
for (var i=0 ; i < tab.length; i++)
$('#'+tab).hide();
$("#moi").show();
});
});
</script>[/javascript]

Re: Factorisation du code avec une fonction

Posté : 18 oct. 2012, 21:11
par schim59
Pas con. Merci

Re: Factorisation du code avec une fonction

Posté : 18 oct. 2012, 21:15
par Aureusms
Si je peux me permettre : je mettrais une classe à toute tes identifiants :
<div id="cv" class="aCacher">
</div>
Ensuite, il faudrait modifier le javascript très simplememnt par :

[javascript]<script type="text/javascript">

$(document).ready(function(){
$ ('.aCacher').hide();
$("#lettre_m").show();


$("#cv_t").click(function(){
$('.aCacher').hide();
$("#cv").show();
});

$("#motivations_t").click(function(){
$('.aCacher').hide();
$("#lettre_m").show();
});

$("#competence_t").click(function(){
$('.aCacher').hide();
$("#competences").show();
});

$("#loisirs_t").click(function(){
$('.aCacher').hide();
$("#loisirs").show();
});

$("#formation_t").click(function(){
$('.aCacher').hide();
$("#formation").show();
});

$("#contacter_t").click(function(){
$('.aCacher').hide();
$("#contacter").show();
});

$("#titre").click(function(){
$('.aCacher').hide();
$("#moi").show();
});
});
</script>[/javascript]

Cela me parait plus clair ainsi.