複数の機能（関数（） - 。jQueryの

Question

のjQueryで1つの.each関数に複数の機能を有効にしようとするが、空白のページを取得するすべてのアイデアを、私は欠けているものをこのコードが正常に機能している

を？ ：

ここ

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"); 
    }); 

は私が構築しようとしている各機能です：必要に応じて

$('.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"); 
    }); 
}); 

ここではHTMLの...ブラケットは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

これは動作するはずです。

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"); 
    }); 
} 

そうでない場合は、あなたのマークアップスニペットに基づいて、ここでダイナミックな変種です：

$('.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"); 
    }); 

}