Une meilleure façon d'écrire des fonctions jQuery

Question

C'est la fonction que j'ai écrit et utilise actuellement dans mon projet, mais je veux vous assurer que s'il y a une meilleure façon de l'écrire:

function pageLoader(pageIndex) { 

    $(".ServicesSectionWrapper,.ServicesSectionWrapper .Selector,.ServicesSection,.JournalSectionWrapper,.JournalSectionWrapper .Selector,.JournalSection,.AboutSectionWrapper,.AboutSectionWrapper .Selector,.AboutSection").hide(); 

    switch (pageIndex) { 

    case 1: 
     $(".AboutSectionWrapper").fadeIn(400, function() { 
      $("#AboutWrapper").fadeIn(400, function() { 
       $("#ManagerWrapper").fadeIn(400, function() { 
        $("#DeveloperWrapper").fadeIn(400, function() { 
         $("#DesignerWrapper").fadeIn(400, function() { 
          $(".AboutSection").fadeIn(400, function() { 
           $(".AboutSection").addClass("PreLoadRotate") 
          }) 
         }) 
        }) 
       }) 
      }) 
     }); 
     break; 

    case 2: 
     $(".JournalSectionWrapper").fadeIn(400, function() { 
      $("#DateOne").fadeIn(400, function() { 
       $("#DateTwo").fadeIn(400, function() { 
        $("#DateThree").fadeIn(400, function() { 
         $("#DateFour").fadeIn(400, function() { 
          $("#DateFive").fadeIn(400, function() { 
           $("#DateSix").fadeIn(400, function() { 
            $("#DateSeven").fadeIn(400, function() { 
             $("#DateEight").fadeIn(400, function() { 
              $(".JournalSection").fadeIn(400, function() { 
               $(".JournalSection").addClass("PreLoadRotate") 
              }) 
             }) 
            }) 
           }) 
          }) 
         }) 
        }) 
       }) 
      }) 
     }); 
     break; 

    case 3: 
     $(".ServicesSectionWrapper").fadeIn(400, function() { 
      $("#AppsWrapper").fadeIn(400, function() { 
       $("#ResponsiveWrapper").fadeIn(400, function() { 
        $("#DigitalWrapper").fadeIn(400, function() { 
         $("#PTRWrapper").fadeIn(400, function() { 
          $(".ServicesSection").fadeIn(400, function() { 
           $(".ServicesSection").addClass("PreLoadRotate") 
          }) 
         }) 
        }) 
       }) 
      }) 
     }); 
     break; 

    } 
} 

Et Voici HTML:

<div class="AboutSectionWrapper"> 

     <div class="Selector" id="AboutWrapper"></div> 
     <div class="Selector" id="DesignerWrapper"></div> 
     <div class="Selector" id="ManagerWrapper"></div> 
     <div class="Selector" id="DeveloperWrapper"></div> 

    <div class="AboutSection"> 
     <div class="Indicator"></div> 
     </div> 

     </div> 

Ceci est un menu (AboutSectionWrapper) qui a sélecteurs que vous pouvez voir et je veux charger le menu d'abord, puis charger successivement les sélecteurs et finalement disparaître dans l'indicateur de menu et ajouter une classe CSS qui a une transition en elle.

Il en est de même pour les autres cas mais par exemple dans CASE 2 Il y a plus de sélecteurs!

S'il vous plaît des conseils, merci.

Answer 1

Je fais quelques hypothèses ... mais ...

La logique du code semble être à disparaître dans un élément, puis à disparaître chez un enfant (frère ou sœur?) Bien que le sélecteur intial est une classe, mais les ID suivants ne sont pas sûrs.

J'utiliserais un identifiant de classe plutôt qu'un ID. Et combinez cela avec child ou nextSibling pour appeler le fondu dans une fonction récursive.

donc (tapé ici, non testé) quelque chose comme ...

case n: 
    fadein(<rootselector>) 
case m: 

...

function fadein(selector) { 
    $(selector).fadeIn(400, function() { 
     if ($(selector).nextSibling(<classselector>)) { 
      fadein($selector.nextSibling(<classselector>); 
} } } 

Answer 2

En bref, je l'aurais fait quelque chose comme:

$('.date').each(function(i){ 
    $(this).fadeIn(400*i); 
}); 

Voyez-vous où je vais avec ça?

Answer 3

Cela peut être fait de nombreuses façons. C'est une solution 1: am, assez simple et qui peut être affinée et améliorée mais vous aurez l'idée!

// Construct an object structure with your chains instead 
var elementAnimation = [{ 
    "element": ".AboutSectionWrapper", 
    "effect": "fadeIn", 
    "duration": 400 
},{ 
    "element": "#AboutWrapper", 
    "effect": "fadeIn", 
    "duration": 400 
},{ 
    "element": ".AboutSection", 
    "effect": "addClass", 
    "className": "PreLoadRotate" 
}] 

// Simple but effective callback handler 
function MyCallback(index){ 

    if(elementAnimation.length <= index) return; 
    var obj = elementAnimation[index]; 
    index++; 

    if(obj.effect == "fadeIn") { 
     $(obj.element).fadeIn(400, MyCallback(index)) 
    } 

    if(obj.effect == "addClass") { 
     $(obj.element).addClass(obj.className); 
     MyCallback(index); // If necessary 
    } 
} 

// Start 
MyCallback(0); 

Vous pouvez mettre en œuvre un peu plus intel dans le JSON, assez simple hein :)

Answer 4

Voilà probablement ce que je ferais:

function runFades(selectors, i) { 
    i = i || 0; 
    $(selectors[i]).fadeIn(400, function() { 
     if (i < selectors.length) { 
      runFades(selectors, i+1); 
     } 
     else { 
      $(selectors[i-1]).addClass("PreLoadRotate"); 
     } 
    }); 
} 

Et puis exécutez-le dans vos case déclarations:

switch (pageIndex) { 
    case 1: 
     runFades(['.AboutSectionWrapper', '#AboutWrapper', ... ]); 
     break; 
    ... 
}