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

}

包含在.each（function（） - jQuery中的多个函数

1 个答案: