javascript - .each(function() 中包含多个函数 - 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");
    }); 
});

如果需要，这里是 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");
    });

}