动画 Jquery 重启

Question

我的 jquery 动画有问题，在执行提交操作时提交表单后，我想将动画链接回第 1 步，但我做不到，当我想转到第 2 步时进度条再次出现进度进度..我没有发现我的错，我留下我的代码笔，样式和表格，看看他们是否可以帮忙

    function nextBackFormulario(boton,primerFormulario,segundoFormulario,valorPrimario,valorSecundario){
    boton.on("click", () => {
    primerFormulario.animate({marginLeft: valorPrimario});
    segundoFormulario.animate({marginLeft: valorSecundario});
})
}

function finalizarForm(boton,primerFormulario,segundoFormulario,tercerFormulario,cuartoFormulario,quintoFormulario,valorPrimario,valorSecundario,valorWidth,){
    boton.on("click", () => {
    primerFormulario.animate({marginLeft: valorPrimario});
    segundoFormulario.animate({marginLeft: valorSecundario});
    tercerFormulario.animate({marginLeft: valorSecundario});
    cuartoFormulario.animate({marginLeft: valorSecundario});
    quintoFormulario.animate({marginLeft: valorSecundario});
    $('.progreso').css({width: valorWidth})
    $('.circulo:not(:first)').toggleClass('activo')
    $('.fas:not(:first)').toggleClass('activado')
    $('#formSimulador').trigger("reset");
})
}

//primer paso
nextBackFormulario($("#siguiente1"), $("#bienvenida"),$("#datosPersonales"),'-105%','0%')
nextBackFormulario($("#anterior0"), $("#bienvenida"),$("#datosPersonales"),'0%','105%')

//segundo paso
nextBackFormulario($("#siguiente2"), $("#datosPersonales"),$("#datosLaborales"),'-105%','0%')
nextBackFormulario($("#anterior1"), $("#datosPersonales"),$("#datosLaborales"),'0%','105%')

//tercer paso
nextBackFormulario($("#siguiente3"), $("#datosLaborales"),$("#datosPrestamo"),'-106%','0%')
nextBackFormulario($("#anterior2"), $("#datosLaborales"),$("#datosPrestamo"),'0%','106%')

//ultimo paso
nextBackFormulario($(".botonCalc"), $("#datosPrestamo"),$("#finalizacionSimulador"),'-105%','0%')
finalizarForm($("#botonEnviar"), $("#bienvenida"),$("#datosPersonales"),$("#datosLaborales"),$("#datosPrestamo"),$("#finalizacionSimulador"),'0%','0%','0%')

https://codepen.io/kamp3r/pen/XWgEKvB

Answer 1

在 ID 为“siguente”的按钮中使用 data-al_paso，不要在 ID 后面加上数字。在类“circulo”上添加后缀。 因此，借助 data-al_paso，您可以通过单击“singuiente”按钮获得“circulo”。

// example circulo hmtl
<div class="circulo-1"><i class="fas fa-money-check-alt"></i></div>
<div class="circulo-2 "><i class="fas fa-hand-holding-usd"></i></div>
etc...

// example siguente
<button data-paso="1" data-al_paso="2" class="siguiente"  type="button">Siguiente</button>

$('.siguente').on('click', function(e) {
   var index = $(this).data('al_paso');
   $('.circulo-' + index).addClass('activo');
});