Minification d'un script

Amstramgram
Javascript

Bonjour,

j'ai fait un petit script pour un projet, ca fonctionne il n'y a pas de problème mais j'ai une logique qui fait que le script est un peu long, voir beaucoup. Je suis sur qu'il y a un moyen de réduire la longueur du script, je vous fait confiance pour ca. :D

Merci beaucoup.

addClassMenu();
function addClassMenu(){
$mainNav = '#main_nav .main_item.active';
if( $('body.page-id-11')[0] || $('body.page-id-13')[0] || $('body.page-id-20')[0] || $('body.page-id-22')[0]) {
   $('#main_nav .main_item:nth-child(2)').addClass('active');
   if( $('body.page-id-11')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(1)').addClass('active');
   }
   if( $('body.page-id-13')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(2)').addClass('active');
   }
   if( $('body.page-id-20')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(3)').addClass('active');
   }
   if( $('body.page-id-22')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(4)').addClass('active');
   }
};

 if( $('body.page-id-80')[0] || $('body.page-id-47')[0] || $('body.page-id-49')[0] ) {
   $('#main_nav .main_item:nth-child(3)').addClass('active');
   if( $('body.page-id-80')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(1)').addClass('active');
   }
   if( $('body.page-id-47')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(2)').addClass('active');
   }
   if( $('body.page-id-49')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(3)').addClass('active');
   }

};
 if( $('body.page-id-51')[0] || $('body.page-id-53')[0] || $('body.page-id-55')[0] ) {
   $('#main_nav .main_item:nth-child(4)').addClass('active');
   if( $('body.page-id-51')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(1)').addClass('active');
   }
   if( $('body.page-id-53')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(2)').addClass('active');
   }
   if( $('body.page-id-55')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(3)').addClass('active');
   }

};
 if( $('body.page-id-57')[0] || $('body.page-id-59')[0] || $('body.page-id-61')[0] || $('body.page-id-63')[0] || $('body.page-id-65')[0]) {
   $('#main_nav .main_item:nth-child(5)').addClass('active');
   if( $('body.page-id-57')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(1)').addClass('active');
   }
   if( $('body.page-id-59')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(2)').addClass('active');
   }
   if( $('body.page-id-61')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(3)').addClass('active');
   }
   if( $('body.page-id-63')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(4)').addClass('active');
   }
   if( $('body.page-id-65')[0] ) {
       $($mainNav+' .all_sub_item li:nth-child(5)').addClass('active');
   }
};
};
 $('.main_item').not('.active').mouseover(function(){
   $('.main_item').removeClass('active');

 });
 $('.main_item').not('active').mouseout(function(){
   addClassMenu();
 });

1 réponse

Vallyan
Réponse acceptée

OK, j'essaye en 13 lignes:

addClassMenu();
function addClassMenu(){
    var ids = {11: 1, grp: 2}, {13: 2, grp: 2}, {20: 3, grp: 2}, {22: 4, grp: 2}, {80: 1, grp: 3}, {47: 2, grp: 3}, {49: 3, grp: 3}, {51: 1, grp: 4}, {53: 2, grp: 4}, {55: 3, grp: 4}, {57: 1, grp: 5}, {59: 2, grp: 5}, {61: 3, grp: 5}, {63: 4, grp: 5}];
    ids.forEach( function(e, i, a) {
        var key = Object.keys(e)[0];
        if( $('body.page-id-' + key)[0] ) {
            $('#main_nav .main_item:nth-child('+e.grp+')').addClass('active');
            $('#main_nav .main_item.active .all_sub_item li:nth-child('+e[key]+')').addClass('active');
        }
    });
}
$('.main_item').not('.active').mouseover(function(){ $('.main_item').removeClass('active'); });
$('.main_item').not('active').mouseout(function(){ addClassMenu(); });

A débugger, évidemment ^^