4

非アクティブな項目を絶対配置で<ul>重ねることで、リスト項目でシミュレートしたこのウィザード ステップ フォームがあります。<li>

特定のステップで次または前のボタンを非表示にしたいことを除いて、ウィザードフォームは希望どおりに機能しています。

これは jQuery での私のロジックですが、何の役にも立ちません。

if (index === 0) {
    $('#prev').addClass(invisible);
    $('#prev').removeClass(visible);
} else if (index === 1) {
    $('#prev').addClass(visible);
    $('#prev').removeClass(invisible);
} else {
   $('#next').addClass(invisible);
}

eq()次のように、現在のステップ要素に連鎖して使用したインデックス値を取得するには

var current;
var index = 0; 

$(function () {
   current = $('.pg-wrapper').find('.current');

$('#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();
   index = current.eq();
});

できるだけ分離しようとしましたが、完全なコードでより良いアイデアが得られます。ご協力いただける場合は、私のJS BINを確認してください

4

5 に答える 5

1

このeq関数はインデックスを提供しません。そのため、index()関数を使用する必要があります。

于 2013-09-25T05:40:37.660 に答える
0

eq() はオブジェクトを返し、index() は整数値を返すため、eq() の代わりに index() 関数を使用します。

デモはこちら

var current;
var navstep;
var index = 0;

$(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();
  index = current.index();
  change_step(index)
});

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

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

  current = current.prev();
  navstep = navstep.prev();
  index = current.index();
  change_step(index)
});

function change_step(value)
{
    if (value === 0) {
        $('#prev').hide();
        $('#next').show();
    } else if (value === 1) {
        $('#prev').show();
        $('#next').show();
    } else {
       $('#next').hide();
       $('#prev').show();
    }
}
于 2013-09-25T06:17:46.597 に答える
0

私はコード全体を見ていませんが、あなたのクラス割り当ては次のように見えるべきではありません:

$('#prev').addClass('invisible');
$('#prev').removeClass('visible');

つまり、クラス名を引用符で囲みますか? そして、クラスを持つことは本当に必要visibleですか？クラスの割り当てと削除invisibleは簡単に行うことができます (このクラスに適切なスタイルが設定されている場合)。

于 2013-09-25T05:39:39.820 に答える