Question

我已经创建了一个逐步的表单，它使用jQuery来完成3个步骤。

在第一步，如何调整jQuery以隐藏我的customise div并在我点击后显示entire_product div？

当我点击第一步时，它隐藏了所有的div。

我正在使用jQuery初始显示entire_product div然后在点击链接时，它会隐藏entire_product div并显示customise div（代码在下面）。

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

这是customise div：

<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>

Answer 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();
          }
 });

一步一步的形式使用jQuery隐藏错误的divs点击返回第一步

1 个答案: