php - 多步骤表单的最后一步缺少后退按钮

Question

我有一个后退按钮，放置在多步骤表单的最后一步，现在它消失了，我不知道为什么，有人可以帮忙吗？

第一个 form-row 是多个步骤所在的位置，因此可以有 1 个步骤或 20 个步骤，依此类推。

第二个form-row充当多个步骤中输入内容的摘要。这上面应该还有一个后退按钮，但我不明白为什么它没有出现。

            <div class="form-row">
                <h2 style="float:left;margin-left:7px;"><?php the_title(); ?></h2>
                <h2 style="float:right;"><?php echo $counter; ?> of <?php echo the_field('select_number_of_questions'); ?></h2>
                <div class="clear"></div>
                <div id="module-area" style="margin-top:0px!IMPORTANT;">
                    <div id="modules-top"></div>
                    <div id="modules-repeat">                           
                        <?php if(get_sub_field('test_image')): ?>
                        <?php while(has_sub_field('test_image')): ?> 
                            <img class="training" src="<?php echo the_sub_field('image'); ?>" />
                            <br /><br />
                        <?php endwhile; ?> 
                        <?php endif; ?>         
                            <p class="training"><?php echo $repeater_row['question']; ?></p><br />
                            <p class="training-highlight">Please choose <span class="bold"><?php echo $repeater_row['required_answers']; ?></span> of the following answers:</p><br />

                            <div class="question" data-max-answers="<?php echo $repeater_row['required_answers']; ?>">
                            <?php $rows = $repeater_row['answer_options'];
                                foreach ($rows as $row){ ?>
                                <?php $Question[$counter] = $_POST['answer'.$counter]; ?>
                                    <div style="display:table-row;">
                                        <div style="display:table-cell;">
                                            <input style="width: 20px;" type="checkbox" name="answer<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" />
                                        </div>
                                        <div style="display:table-cell;">
                                            <p>
                                                <?php echo $row['answer']; ?>
                                            </p>
                                        </div>              
                                    </div>
                                <?php } ?>
                            </div>  
                            <div class="inner"></div>
                            <button class="next"></button>
                        <div class="clear"></div>
                    </div>
                    <div style="margin-bottom:5px;" id="modules-bottom"></div>
                </div>
            </div>
            <?php $counter++; } ?>

            <div class="form-row" id="form-row-last" style="display:none;">
                <h2 style="float:left;margin-left:7px;"><?php the_title(); ?></h2>
                <div class="clear"></div>
                <div id="module-area" style="margin-top:0px!IMPORTANT;">
                    <div id="modules-top"></div>
                    <div id="modules-repeat">                           

                        <div class="inner" id="inner-summary"></div>
                        <button class="next"></button>

                        <div class="clear"></div>
                    </div>
                    <div style="margin-bottom:5px;" id="modules-bottom"></div>
                </div>
            </div>

这是我的 jquery:

<script type="text/javascript">
jQuery(function($) {
$("input[type=checkbox]").on("change", function(){
    var html = "";
    // Get checked checkboxes
    $(".form-row").each(function(){
        var question = $(this).find(".training").text(),
            checkedlist = [];
        $(this).find("input:checked").each(function(){
            checkedlist.push($(this).val());
        });
        // Add question and answers to the summary, only if minimum of 1 checkbox checked
        if( checkedlist.length )
        {
            html += "<p class='training'>" + question + "</p>" + checkedlist.join(", ") + "<br />";
        }
    });

    $("#inner-summary").html(html);
});
});

jQuery(function($) {
$(document).ready(function() {    

    // prepend a 'previous' button to all form-rows except the first
    $('<button>').addClass('previous').appendTo($('.inner').not(':first'));

    // hide all form-rows, but not the first one
    $('.form-row').not(':first').hide();

    // hide on last step
    $('button.next').last().hide();

    // add the submit button to the last form-row
    $('<input>').addClass('check').prop('type', 'submit').appendTo($('.form-row:last'));


    // handle the previous button, we need to use 'on' here as the
    // previous buttons don't exist in the dom at page load
    $('.form-row').on('click', 'button.previous', function(e) {
        e.preventDefault();
        $(this).parents('div.form-row').hide().prev('div.form-row').show();
    });

    $('button.next').click(function(e) {
        // prevent the next buttons from submitting the form
        e.preventDefault();
        // hide this form-row, and show the next one
        $(this).parents('div.form-row').hide().next('div.form-row').show();
    });    

});
});

jQuery(function($) {
$(document).ready(function () {
    $("input[type=checkbox]").click(function (e) {
        if ($(e.currentTarget).closest("div.question").length > 0) {
            toggleInputs($(e.currentTarget).closest("div.question")[0]);        
        }
    });
});

function toggleInputs(questionElement) {
    if ($(questionElement).data('max-answers') == undefined) {
        return true;
    } else {
        maxAnswers = parseInt($(questionElement).data('max-answers'), 10); 
        if ($(questionElement).find(":checked").length >= maxAnswers) {
            $(questionElement).find(":not(:checked)").attr("disabled", true);
        } else {
            $(questionElement).find("input[type=checkbox]").attr("disabled", false);
        }
    }
}
});
</script>

Answer 1

通过添加解决:

$('<button>').addClass('previous').appendTo($('#inner-summary'));

到此 block :

jQuery(function($) {
$("input[type=checkbox]").on("change", function(){
    var html = "";
    // Get checked checkboxes
    $(".form-row").each(function(){
        var question = $(this).find(".training").text(),
            checkedlist = [];
        $(this).find("input.correct:checked").each(function(){
            checkedlist.push($(this).val());
        });
        // Add question and answers to the summary, only if minimum of 1 checkbox checked
        if( checkedlist.length )
        {
            html += "<p class='training'>" + question + "</p><p>" + checkedlist.join(", ") + "</p><br />";
        }
    });

    $("#inner-summary").html(html);
    $('<button>').addClass('previous').appendTo($('#inner-summary'));
});
});