1

我创建了一个使用 jQuery 逐步完成 3 个步骤的分步表单。

第一步，如何调整 jQuery 以隐藏我的customisediv 并在单击返回时显示entire_productdiv？

在我单击第一步时，它隐藏了所有 div。

我使用 jQuery 最初显示entire_productdiv，然后当单击链接时，它会隐藏entire_productdiv 并改为显示customisediv（代码如下）。

<div class="entire_product">
    Content here.
    <a id="customise" class="configure-demo" href="#">Configure new system &amp; get quote</a>
</div>

这是customisediv：

<div class="customise" style="display:none;">
    <form id="customisesystem" method="post" action="">
        <div id="first-step">
            <div class="steps">
                <p><b>Step 1 of 3</b></p>
            </div>
            <div class="progress-buttons"></div>
            <div class="clear"></div>

            <div id="customise-area">
                <p>Options 1</p>

                <div id="customise-area">
                    <input type="checkbox" name="hardware[]" value="<?php the_title(); ?>">
                </div>
            </div>
        </div>

        <div id="second-step">
            <div class="steps">
                <p><b>Step 2 of 3</b></p>
            </div>
            <div class="progress-buttons"></div>
            <div class="clear"></div>

            <div id="customise-area">
                <p>Options 2</p>

                <div id="customise-area">
                    <input type="checkbox" name="software[]" value="<?php the_title(); ?>">
                </div>
            </div>
        </div>      

        <div id="third-step">
            <div class="steps">
                <p><b>Step 3 of 3</b></p>
            </div>
            <div class="progress-buttons"></div>
            <div class="clear"></div>

            <div id="customise-area">
                <p>Options 3</p>

                <div id="customise-area">
                    <input type="submit" name="submit" id="submit" value="submit" />
                </div>
            </div>
        </div>      
    </form>
</div>

然后我有一个 jQuery 的负载，即创建返回和下一步按钮来逐步完成 3 个步骤：

<script type="text/javascript">
var prevLink = '<a class="back" href="#">Back</a>';
var nextLink = '</a><a class="next" href="#">Next</a>';
var navHTML = '<div class="prev-next">' +
                         prevLink +
                         nextLink +
                      '</div>';
var prevLink = '<a class="back" href="#">Back</a>';
var nextLink = '</a><a class="next" href="#">Next</a>';
var navHTML = '<div class="prev-next">' +
                         prevLink +
                         nextLink +
                      '</div>';
jQuery(document).ready(function( $ ) {
            // init
            $('#customisesystem > div')
                .hide()
                .prepend(navHTML);
            $('#first-step .prev').remove();
            $('#last-step .next').remove();

            // show first step
            $('#first-step').show();

            $('a.next').click(function(){
                var whichStep = $(this).parent().parent().attr('id');

                if( whichStep == 'first-step' )
                {
                    // validate first-step
                }
                else if( whichStep == 'second-step' )
                {
                    // validate second-step
                }
                else if( whichStep == 'last-step' )
                {
                    // validate last-step
                }

                $(this).parent().parent().hide().next().show();
            });

            $('a.back').click(function(){
                $(this).parent().parent().hide().prev().show();
            });
        });


jQuery(document).ready(function( $ ) {
$("#customise").click(function(){
    $(".entire_product").hide();
    $(".customise").show();
});
});
</script>
4

1 回答 1

1

看到这个：http: //jsfiddle.net/nnKp4/1/

 $('a.back').click(function(){
          var whichStep = $(this).parent().parent().attr('id');
          if(whichStep == "first-step"){
            $(".customise").hide();
            $(".entire_product").show();
          }
          else{
            $(this).parent().parent().hide().prev().show();
          }
 });
于 2013-01-10T16:24:25.193 回答