2

ユースケースの例は、いくつかのステップに分割された登録フォームです。つまり、次の 3 つのステップがあります。

  • コンテナ 1 が表示されます
  • コンテナ 2 は非表示です
  • コンテナ 3 は非表示です

ユーザーが次のボタンをクリック:

  • コンテナ 1 は非表示です
  • コンテナ 2 が表示されます
  • コンテナ 3 は非表示です

ユーザーが次のボタンをクリック:

  • コンテナ 1 は非表示です
  • コンテナ 2 は非表示です
  • コンテナ 3 が表示されます

ユーザーが前のボタンをクリック:

  • コンテナ 1 は非表示です
  • コンテナ 2 が表示されます
  • コンテナ 3 は非表示です

等々。これは私が試したものです：

$('#btn-next-step').live('click', function(){
    $('.form-step').each(function(){
        if($(this).is(':visible')){
            $(this).hide();
        }else{
            $(this).show();
            return false;
        }
    });
});

HTML:

<form>
    <div class="container-fluid form-step form-step1">
        step1
    </div>
    <div class="container-fluid form-step form-step2">
        step2
    </div>
    <div class="container-fluid form-step form-step3">
        step3   
    </div>
</form>

これが私のフィドルです：http://jsfiddle.net/feFcu/

ロジックを教えてください。この種の動作を実現する方法はありますか?

4

2 に答える 2

3

まず、目に見えるものを変数に格納します。次に、それらをすべて非表示にし .next('.form-step')、以前に表示されていたものに続くものを見つけるために使用します.show()。

$('#step').on('click', function(){
    // Find the visible one and store in a variable
    var showing = $('.form-step:visible');
    // Hide all of them (including the currently visible one)
    $('.form-step').hide();
    // Find the next one with .next() and make it visible
    showing.next('.form-step').show();            
 });​

これが更新されたjsfiddleの例です...

は非推奨になったため、に置き換えたことに注意して.live()ください。.on().live()

于 2012-11-25T13:53:36.150 に答える
0

この行を使用すると、一連の手順が提供されます。

var steps = document.getElementsByClassName('.form-step');

これで、別の変数を使用してどのステップがアクティブであるかを追跡することにより、ステップを繰り返し実行できます。

于 2012-11-25T14:07:26.053 に答える