1

最終的にテストを形成する段階的なプロセスを作成しました。Wordpress からデータの行を取得し、各行は質問です。

回答ページのレビューとして機能するステップを最後に追加したいと思います。現在の最後のステップでは、送信ボタンが表示されます。

現在の最後のステップを変更して、最後の .form-row div を非表示にし、送信ボタンのある別の div を表示する次のボタンを表示するにはどうすればよいですか?

ずっと見つめていたせいかもしれませんが、誰か助けてくれませんか？

これまでの私のコードは次のとおりです。

<script type="text/javascript">
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('submit').prop('type', 'submit').val('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();
    });    

});
});
</script>

HTML:

                <?php $counter = 1; if(get_field('step_by_step_test')): ?>
                <?php while(the_repeater_field('step_by_step_test')): ?>        
                <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 $total; ?></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'); ?>" />
                            <?php endwhile; ?> 
                            <?php endif; ?>         

                            <br /><br />    
                            <p class="training"><b><?php echo the_sub_field('question'); ?></b></p>

                            <?php if(get_sub_field('answer_options')): ?>
                            <?php while(has_sub_field('answer_options')): ?> 
                                <p class="contact-form"> 
                                    <input style="width: 20px;" type="checkbox" name="CheckboxGroup<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" />
                                    <?php echo the_sub_field('answer'); ?>
                                </p>                
                            <?php endwhile; ?> 
                            <?php endif; ?>
                            <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++; endwhile; ?> 
                <?php endif; ?>
4

1 に答える 1

0

私は子供を数え、次に質問（次/前）ボタンを表示しています。結果はあなたが試みていると私が信じていることです。http://jsfiddle.net/TWB6Z/

JS

$(document).ready(function() {

var EZcounter = $('.form-row').length - 1;

    {...your code...}

    $('.form-row:nth-child(' + EZcounter + 'n) .next').click(function() {
        $('.form-row').show();
        $('.previous, .next').hide();
    });
});​
于 2012-10-05T14:53:19.293 に答える