8

私は新しいプログラマーですので、このアマチュアの場合はご容赦ください... 私は何らかの方向性、またはおそらくいくつかのアイデアを探しています。ここでの目標は学ぶことなので、正しい方向へのプッシュは高く評価されます。

わかりました.. jQuery を使用して、単純なサインアップ フォーム用の「ウィザード」のようなコントロールを作成することに挑戦しました。私は非常にうまく手順を進めることができますが、自分のコードを見ていて、考えずにはいられません。「これを行うには、より良い、より簡単で適切な方法が必要です」。これが私が持っているものです。

function toggleStep(){
        $("#nextButton").click(function(){
            if($("#nextButton").name = "step1"){
                $("#nextButton").attr("name", "step2");

                $("#backButton").attr("name", "step1").css("display", "inline");

                $("#step1").hide();
                $("#step2").show("fade", 250);
            }
            $("#nextButton").click(function(){
                if($("#nextButton").name = "step2"){
                    $("#nextButton").attr("name", "step3");

                    $("#backButton").attr("name", "step2");

                    $("#step2").hide();
                    $("#step3").show("fade", 250);
                }
                    $("#nextButton").click(function(){
                        if($("#nextButton").name = "step3"){
                            $("#nextButton").attr("name", "step4");
                            $("#nextButton").css("display", "none");

                            $("#backButton").attr("name", "step3");

                            $("#step3").hide();
                            $("#step4").show("fade", 250);
                        }
                });
            });
        }); 
    }

また、「戻るボタン」機能を作成するときに自分を台無しにしてしまったようです。このコードは単に十分ではありません。これにどのようにアプローチしますか？ありがとう！！！

4

3 に答える 3

4

jquery を使用して class="activeStep" を切り替え、残り (非表示、表示、フェード) を css で行います。

于 2012-12-31T00:20:53.417 に答える
3

おそらく、jQuery のprev()およびnext()メソッドを調べたいと思うでしょう。ステップのクラス名 (DOM ID ではなく) に基づくロジックと組み合わせると、これらのメソッドは非常に簡単にコードを短縮し、簡素化できます。

大まかな詳細な例:

$('#nextButton').click(
    function() {
        var current_step = $('#steps_container').find('.step:visible');
        var next_step    = current_step.next();
        if (next_step.length) {
            current_step.hide();
            next_step.fadeIn(250);
        }
    }
);

$('#prevButton').click(
    function() {
        var current_step = $('#steps_container').find('.step:visible');
        var prev_step    = current_step.prev();
        if (prev_step.length) {
            current_step.hide();
            prev_step.fadeIn(250);
        }

    }
);

これは、次のマークアップの任意の数のステップを適切に処理する必要があります。

<div id="steps_container">
    <div class="step">Step 1</div>
    <div class="step">Step 2</div>
    <div class="step">Step 3</div>
    <div class="step">Step 4</div>
    <div class="step">Step 5</div>
    <div class="step">Step 6</div>
    ...
</div>

@stefanz が私のコードを改善している限り、次のように、ナビゲーション ボタンのハンドラーをクラスにバインドすることも、より単純で一般化されたアプローチになる可能性があります。

$('.steps_nav_buttons_bar .steps_nav_button').click(
    function() {
        var current_step = $('#steps_container').find('.step:visible'),
            new_step     = $(this).hasClass('next') ? current_step.next() : current_step.prev();

        if (new_step.length) {
            current_step.fadeOut('fast',function() { new_step.fadeIn('fast') })
        }
     }
);

これの利点は、複数のナビゲーション ボタン セットを追加できることです。たとえば、上部と下部にナビゲーション バーが必要な場合です。

<div class="steps_nav_buttons_bar top_bar">
    <div class="steps_nav_button prev">Prev</div>
    <div class="steps_nav_button next">Next</div>
</div>

<div id="steps_container">
    <div class="step">Step 1</div>
    <div class="step">Step 2</div>
    <div class="step">Step 3</div>
    <div class="step">Step 4</div>
    <div class="step">Step 5</div>
    <div class="step">Step 6</div>
    ...
</div>

<div class="steps_nav_buttons_bar bottom_bar">
    <div class="steps_nav_button prev">Prev</div>
    <div class="steps_nav_button next">Next</div>
</div>
于 2012-12-31T00:37:11.650 に答える
2

私は @Boaz コードを編集しました。コメントもいくつか追加しました。

jQueryコードは次のようになります

 $('#next, #prev').click(function(){
    var t = $(this),
        current = $('#steps_container').find( '.step:visible' ),
        stepGo = ( t.attr( 'id' ) == 'next' ? current.next() : current.prev() );

    if ( stepGo.length ) {
      current.fadeOut( 'slow', function(){

        stepGo.fadeIn( 'slow' );
      });
    };
    return false;
  });
于 2012-12-31T01:05:08.370 に答える