fonctions multiples enveloppé dans .each (function() -. JQuery

Question

Essayer de transformer plusieurs fonctions en une seule fonction de .each dans jQuery, mais obtenir la page blanche Toute idée de ce que je suis absent

Ce code fonctionne correctement? :

new Vivus('svg-0', {duration: 200}, function(){ 
     $('.svg-animation .svg-1').css("opacity", "0"); 
     $('.svg-animation .illustration-1').css("opacity", "1"); 
    }); 

    new Vivus('svg-1', {duration: 200}, function(){ 
     $('.svg-animation .svg-2').css("opacity", "0"); 
     $('.svg-animation .illustration-2').css("opacity", "1"); 
    }); 


    new Vivus('svg-2', {duration: 200}, function(){ 
     $('.svg-animation .svg-3').css("opacity", "0"); 
     $('.svg-animation .illustration-3').css("opacity", "1"); 
    }); 

    new Vivus('svg-3', {duration: 200}, function(){ 
     $('.svg-animation .svg-4').css("opacity", "0"); 
     $('.svg-animation .illustration-4').css("opacity", "1"); 
    }); 

Voici le chaque fonction que je suis en train de construire:

$('.drawings').each(function (index, value) { 
    var svgs = ($(this).find('#svg-' + index)); 
    //console.log(svgs); 

    new Vivus(svgs, {duration: 200}, function(){ 
     $('.svg-animation .svg-' + index).css("opacity", "0"); 
     $('.svg-animation .illustration-' + index).css("opacity", "1"); 
    }); 
}); 

est ici HTML si nécessaire ... les crochets sont utilisés dans le code ExpressionEngine:

<div class="svg-animation"> 
    <div class="drawings mac"> 
     <svg id="svg-{blocks:index:of:type}" class="svg svg-{blocks:index:of:type}" style="max-width: {svg_max_width}" xmlns="http://www.w3.org/2000/svg" viewBox="{svg_view_box}"> 
      <title>{svg_title}</title> 
      {svg_code} 
     </svg> 
     <img class="illustration illustration-{blocks:index:of:type}" style="max-width: {svg_max_width}" src="/assets/src_assets/images/step-1-img.png"> 
    </div> 
</div> 

Answer 1

Cela devrait fonctionner.

for (var i=0; i<4; i++) { 
    new Vivus('svg-'+i, {duration: 200}, function(){ 
     $('.svg-animation .svg-'+(i+1)).css("opacity", "0"); 
     $('.svg-animation .illustration-'+(i+1)).css("opacity", "1"); 
    }); 
} 

Sinon, en fonction de votre extrait de balisage, voici une variante dynamique:

$('.drawings .svg').each(function() { 

    var theID = $(this).attr('id').replace("svg-", ""); 
    var nextID = theID + 1; 


    new Vivus('svg-'+theID, {duration: 200}, function(){ 
     $('.svg-animation .svg-'+ nextID).css("opacity", "0"); 
     $('.svg-animation .illustration-'+ nextID).css("opacity", "1"); 
    }); 

}