クラスを次のliに移動するが、同じLIに固執する

Question

ここでの目標は、次の質問番号を表示する代わりに次の質問にスクロールする「次の」ボタンであるプログレスバーを作成することです。 「次へ」をクリックすると、進行中の質問番号が進行状況バーでアクティブになり、進行状況バーの次のliが次のボタンになります。 クラスが期待どおりに変更されていますが、進行状況バーの2番目のliは3番目のボタンではなく次のボタンのままです。したがって、次を選択すると次の質問にスクロールし、次に＃2を繰り返し選択します。

私は単純なものが欠けていると確信していますが、元の "次へ"のままではなく、次のクラスの要素を見つけることができません。

ありがとうございました！ここ

フィドル：https://jsfiddle.net/eg6q44nm/

$('.next').click(function() { 
     $('.next').removeClass('next').next().addClass('next'); 
     $('html,body').animate({ scrollTop:$('.question-container.active').next().offset().top}, 'slow'); 
     $('.progress-bar-steps.active').removeClass('active').addClass('answered'); 
     $('.question-container.active').removeClass('active').addClass('disabled').css('opacity', '.3').next().addClass('active').removeClass('disabled'); 
     $('.question-container').each(function (i, value){ 
     var qId = $(this).attr('id'); 
     if ($(this).hasClass('active')) { 
      $(this).css('opacity','1.0'); 
      $('#progressBar').find("[data-item='" + qId + "']").addClass('active').text(i + 1); 
      $('.progress-bar-steps.active').next('.progress-bar-steps').addClass('next').text('Next'); 
     } else { 
      $(this).addClass('disabled'); 
     } 
     }); 
    }); 

Answer 1

。別のセレクタを使用してクリックハンドラをバインドし、その要素に.nextクラスがあるかどうかを確認する必要があります。

$(".progress-bar-steps").on("click", function(e) { 
    var button = $(this); 
    if (button.hasClass("next")) { 
     ... 
    } 
}); 

Answer 2

あなたの問題はここにある：

var next = $('#progressBar').find('li.next')[ 0 ]; 
$(next).click(function() { 

あなたは時にDOMがロードnextクラスを持っているものは何でもliにクリックイベントを結合しています。クラスを持つすべての要素がイベントにバインドされるように、動的にする必要があります。

あなたはこれを行うことができます。

$('li').on('click',next,function() { 

これは、次のクラスを持っているli要素に対して、「見」します。ここで

は、あなたの更新フィドルです：一度だけ発生したクリックハンドラを登録https://jsfiddle.net/zephyr_hex/eg6q44nm/1/