0

ここSOで見つけたjQueryスクリプトを使用して、4つの部分に分割されたフォームを作成しました。ユーザーがフォームの一部への入力を終了すると、[次へ] をクリックしてフォームの次の部分に移動するか、[戻る] をクリックして前の部分に戻ります。

4 つのフォーム パーツのタイトルを持つフォームの上に順序付けられたリストを追加し、ユーザーがフォーム パーツ 1 を表示しているときに li 1 に「アクティブ」クラスを追加し、ユーザーがフォーム パート 2 などを表示しています。

私はjQueryの専門家ではないので、これを行う方法がわかりません。誰かが私を正しい方向に向けることができますか?

順序付きリストは次のとおりです。

<ol>
  <li class="active">Part 1</li> /* 'active' when user is viewing part 1 */
  <li>Part 2</li>
  <li>Part 3</li>
  <li>Part 4</li>
</ol>

jQueryスクリプトは次のとおりです。

    var tab_pool = ["form-part-1", "form-part-2", "form-part-3", "form-part-4"];
    var visible = $(".tab:visible").attr('class').split(" ")[1];
    var curr_ind = $.inArray(visible, tab_pool);
    $(".submit").hide();
    $(".back").hide();

    var validator = $('form').validate({
    ignore: 'input[type="button"],input[type="submit"]',
    });

    $('.next').click(function () {
        var tab = $(".tab:visible");

        var valid = true;
        $('input', tab).each(function(i, v){
            valid = validator.element(v) && valid;
        });

        if(!valid){
            return;
        }

        if (curr_ind < 3) {
            $(".tab:visible").css({position:"absolute",left:"-9999px"}).animate({left: -9999});
            curr_ind = curr_ind + 1;
            $("." + tab_pool[curr_ind]).css({position:"static",left:"auto"}).animate({left: 0});
            $(".submit").hide();
            $(".back").show();
        }
        if (curr_ind == 3) {
            $(".submit").show();
            $(".next").hide();
        }
    });

    $('.back').click(function () {
        if (curr_ind > 0) {
            $(".tab:visible").css({position:"absolute",left:"-9999px"}).animate({left: -9999});
            curr_ind = curr_ind - 1;
            $("." + tab_pool[curr_ind]).css({position:"static",left:"auto"}).animate({left: 0});
            $(".submit").hide();
            $(".next").show();
        }
        if (curr_ind == 0) {
            $(".back").hide();
        }
    });


});
4

1 に答える 1

1

次のクリック機能と戻るクリック機能の両方で、それぞれの最後に次を追加します。

$('li').removeClass('active').eq(curr_ind).addClass('active');
于 2013-11-10T22:52:39.720 に答える