Question

我的目标是拥有一个进度条，而不是显示下一个问题编号，它是一个“下一个”按钮，可以滚动到下一个问题。单击“下一步”后，当前活动的问题编号在进度条中处于活动状态，进度条中的下一个li将成为下一个按钮。我的课程按预期更改，但进度条中的第二个li仍然是下一个按钮而不是第三个按钮。因此，当您选择Next，然后选择＃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加载时，您将click事件绑定到li具有next类的任何内容。您希望它是动态的，因此具有该类的任何元素都将绑定到该事件。

你可以这样做：

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

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

这是您更新的小提琴：https://jsfiddle.net/zephyr_hex/eg6q44nm/1/

Answer 2

仅注册点击处理程序一次。您需要使用不同的选择器绑定click处理程序，然后检查该元素是否具有.next类。

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

将班级移到下一个李，但坚持同样的李

2 个答案: