0

手順をナビゲートする簡単なウィザード フォームがあります。プラグインがたくさんあることは知っていますが、自分で作るのが好きです。

>>次のステップを表示するはずのボタンに問題があります。

var current = $('.pg-wrapper div').hasClass('current');
var index = $('.pg-wrapper').index(current);

$(function () {
  $('.pg-wrapper div').not('.current').hide();
}(jQuery));


$('#next').on('click', function() {
  current.next().addClass('current');
  current.removeClass('current');
});

完全なサンプルJS BINは次のとおりです。

4

1 に答える 1

0

あなたのコードにはいくつかの問題があります:

  • hasClass: ブール値を返し、セレクターにクラスがあるかどうかを通知します
  • インデックス: 役に立たない
  • 次のクリック機能では、クラスを変更していますが、可視性を切り替えていません
  • ステップバーは処理されません

このコードでは正常に動作しているようです。find('.current')get the current step child の.pg-wrapper使用とnext、兄弟間を移動するの使用を確認してください。

コード：

var current;
var navstep;
$(function () {
   current = $('.pg-wrapper').find('.current');
  navstep=$('.nav-step').find('.active');
  $('.pg-wrapper div').not(current).hide();
}(jQuery));


$('#next').on('click', function() {
  if (current.next().length==0) return
  current.next().addClass('current').show();
  current.removeClass('current').hide();

    navstep.next().addClass('active');
  navstep.removeClass('active');

 current = current.next();
  navstep=navstep.next();
});

デモ: http://jsbin.com/oxamOBA/1/edit

于 2013-09-07T12:24:42.470 に答える