包装在函数中的多个函数(.each()- jQuery

Question

尝试在jQuery中将多个函数转换为一个.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");
    }); 
});

如果needed...the括号是ExpressionEngine中使用的代码，下面是HTML语言：

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

}