1

jQueryを使用して3つのステップをステップスルーするステップバイステップフォームを作成しました。

最初のステップで、jQueryを調整して、divを非表示にし、customiseクリックentire_productして戻ったときにdivを表示するにはどうすればよいですか？

最初のステップに戻ると、すべてのdivが非表示になります。

私はjQueryを使用して最初にentire_productdivを表示し、次にリンクをクリックするとentire_productdivを非表示にし、customise代わりにdivを表示します（コードは以下にあります）。

<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 に答える