我的目标是有一个进度条,它不是显示下一个问题编号,而是一个滚动到下一个问题的“下一个”按钮。单击“下一步”后,当前事件的问题编号将在进度栏中激活,并且进度栏中的下一个李将成为下一个按钮。 我的类(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');
}
});
});
最佳答案
您的问题在这里:
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/
关于jquery - 将类(class)移至下一个里,但停留在同一里,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48026528/