以多步骤形式创建上一个按钮

Question

我正在创建一个多步骤表单Web应用程序，而我先前的按钮不起作用。我试图使其工作，但表单页面为空。 showNextForm方法有效，但showprevForm不起作用。出现上一个表单页面，但突然消失并变为空白。

function showNextForm($currentForm) {
    var currentFormStep = parseInt($currentForm.attr('data-step')) ||
        false;
    var $nextForm = $('.js-form-step[data-step="' + (currentFormStep + 1) +
                      '"]');

    console.log('Current step is ' + currentFormStep);
    console.log('The next form is # ' + $nextForm.attr('data-step'));

    $body.addClass('freeze');

    // Ensure top of form is in view
    $('html, body').animate({
        scrollTop: $progressBar.offset().top
    }, 'fast');

    // Hide current form fields
    $currentForm.addClass('leaving');
    setTimeout(function() {
        $currentForm.addClass('hidden');
    }, 500);

    // Animate container to height of form
    $animContainer.css({
        'paddingBottom': $nextForm.height() + 'px'
    });

    // Show next form fields
    $nextForm.removeClass('hidden')
        .addClass('coming')
        .one(transitionEnd, function() {
        $nextForm.removeClass('coming waiting');
    });

    // Increment value (based on 4 steps 0 - 100)
    value += 33;

    // Reset if we've reached the end
    if (value >= 100) {
        formReset();
    } else {
        $('.form-progress')
            .find('.form-progress-indicator.active')
            .next('.form-progress-indicator')
            .addClass('active');

        // Set progress bar to the next value
        $progressBar.val(value);
    }

    // Update hidden progress descriptor (for a11y)
    $('.js-form-progress-completion').html($progressBar.val() + '% 
                                           complete ');

                                           $body.removeClass('freeze');

    return false;
}

//-------------------------------------------------------------------- 
-- -- -- -- -- -- -- -- -- -- - //

function showPrevForm($currentForm) {
    var currentFormStep = parseInt($currentForm.attr('data-step')) ||
        false;
    var $PrevForm = $('.js-form-step[data-step="' + (currentFormStep - 1) +
                      '"]');

    console.log('Current step is ' + currentFormStep);
    console.log('The next form is # ' + $PrevForm.attr('data-step'));

    $body.addClass('freeze');

    // Ensure top of form is in view
    $('html, body').animate({
        scrollTop: $progressBar.offset().top
    }, 'fast');

    // Hide current form fields
    $currentForm.addClass('leaving');
    setTimeout(function() {
        $currentForm.addClass('hidden');
    }, 500);

    // Animate container to height of form
    $animContainer.css({
        'paddingBottom': $PrevForm.height() - 'px'
    });

    // Show next form fields
    $PrevForm.removeClass('hidden')
        .addClass('coming')
        .one(transitionEnd, function() {
        $PrevForm.removeClass('coming waiting');
    });

    // Increment value (based on 4 steps 0 - 100)
    value -= 33;

    // Reset if we've reached the end
    if (value >= 100) {
        formReset();
    } else {
        $('.form-progress')
            .find('.form-progress-indicator.active')
            .next('.form-progress-indicator')
            .addClass('active');

        // Set progress bar to the next value
        $progressBar.val(value);
    }

    $('.js-form-progress-completion').html($progressBar.val() + '% complete');

    $body.removeClass('freeze');

    return false;
}