jquery - 将类(class)移至下一个里，但停留在同一里

Question

我的目标是有一个进度条，它不是显示下一个问题编号，而是一个滚动到下一个问题的“下一个”按钮。单击“下一步”后，当前事件的问题编号将在进度栏中激活，并且进度栏中的下一个李将成为下一个按钮。我的类(class)正在按预期发生变化，但是进度栏中的第二个 li 仍然是下一个按钮而不是第三个。因此，当您选择“下一步”时，它会滚动到下一个问题，然后选择“#2”(一遍又一遍)。

我确信我错过了一些简单的东西，但我只是无法让它找到类“next”的下一个元素，而不是停留在原来的“next”上。

谢谢!

在这里摆弄: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

您的问题在这里:

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

当 DOM 加载时，您将点击事件绑定(bind)到 li 具有 next 类的任何内容。您希望它是动态的，以便具有该类的任何元素都将绑定(bind)到该事件。

你可以这样做:

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

这将“监视”具有下一个类的 li 元素。

这是您更新的 fiddle :https://jsfiddle.net/zephyr_hex/eg6q44nm/1/