javascript - Bootstrap Multistep Form在返回时被破坏

Question

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

我正在使用的库/包:

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

你好，美好的一天!我正在尝试修改上面原始链接中提到的基于 Codepen 的 Bootstrap Multistep Form。

我的样本修订

我的问题是，当我尝试按下 Next 按钮并尝试一个用例场景时，如果用户尝试使用 Previous Go Back 会怎样 按钮，当前表单正在被销毁。我尝试修改给定的 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'
    });
});

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

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

然后单击“上一步”按钮编辑一些详细信息

我尝试解决问题
从上面的代码片段可以看出，我尝试从“上一个”javascript 函数中删除 current_fs.hide() 代码

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

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

你能帮我解决这个难题吗？当我点击上一步 按钮时，网站在哪里没有被破坏？顺便说一下，我正在使用 Laravel Blade 模板引擎。

这是我的全部代码:Source Code

Answer 1

第一个字段集在“下一个”动画中被设置为position: absolute，但在“上一个”动画之后没有被重置为position: relative。

修改“上一个”动画中的complete函数，添加这一行:

previous_fs.css({'position': 'relative'});

(注意:OP 和我在 chat 上从一个现已删除的答案中得出了这个答案 - 这个答案很接近，但不太正确。)