javascript - 返回时引导多步表单被破坏

问题描述

我正在使用的应用程序：
HTML、CSS、Javascript、Bootstrap 3

我正在使用的库/包：

https://codepen.io/designify-me/pen/qrJWpG

你好，美好的一天！我正在尝试修改上面原始链接中提到的基于 Codepen 的 Bootstrap 多步表单。

我的样本修订

我的问题是，当我尝试按下Next按钮并尝试使用用例场景时，如果用户尝试使用Previous按钮返回，当前表单将被破坏。我尝试修改给出的javascript代码，但无济于事，一切都崩溃了

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
var participants;

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });

    $("#rname").val($("#name").val())
    $("#remail").val($("#eemail").val())
    $("#rcontact").val($("#contact").val())
    $("#rcompany").val($("#company").val())

    participants = $("input[name='participants[]']")
        .map(function(){return $(this).val();}).get();

    // alert(participants)
    $("#rparticipants").val(participants)
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            // current_fs.css('display', 'none');
            animating = false;
            // current_fs.hide();
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

复制上述问题的示例屏幕截图

从上面的第一个屏幕截图中单击“下一步”按钮后

然后点击“Previous”按钮编辑一些细节

我尝试解决问题
正如您从上面的代码片段中看到的那样，我尝试从“previous”javascript 函数中删除current_fs.hide()代码

complete: function(){
    //current_fs.hide();
    // current_fs.css('display', 'none');
    animating = false;
    // current_fs.hide();
},

第一步仍然存在，但第二步感觉它仍然存在，但它只是被隐藏了，因此添加更多参与者的添加按钮不再可点击。并且第二步中的元素仍然存在——这意味着它们重叠了。

你能帮我解决这个难题吗？当我单击上一个按钮时，网站不会被破坏？顺便说一句，我正在使用 Laravel Blade 模板引擎。

这是我的整个代码：源代码

标签： javascripthtmlcsstwitter-bootstrap

javascript - 返回时引导多步表单被破坏

问题描述

解决方案

推荐阅读