Javascript Jquery-多步骤表单进度条，使用无序列表项显示已完成的步骤

我试图用JQuery构建一个多步骤表单，但我的进度条出现了一些问题

“我的进度条”是一个无序列表，其中的列表项应在用户按下“下一步”时以红色突出显示。但是，当按下“上一步”时，列表项将丢失高亮显示的红色。我非常接近解决方案。我有前两个选择，但当我进入最后一步，我没有看到任何突出显示

这是我的小提琴：

JQuery： $（文档）.ready（函数（）{

HTML:

---

非常感谢所有评论。我将此表单用作指南。JQuery对我来说太复杂了。

这里是一个工作示例

jQuery

$('.next').click(function () {
    $('.current').removeClass('current').hide().next().show().addClass('current');
    $('#progressbar li.active').next().addClass('active');

});

$('.previous').click(function () {
    $('.current').removeClass('current').hide().prev().show().addClass('current');
    $('#progressbar li.active').removeClass('active').prev().addClass('active');
});

这是您的解决方案：

---

我将通过添加一个更高级别的类来处理它，该类描述用户所处的步骤

从#progressbar上的“第一步”类开始。当用户单击“下一步”时，添加一个名为“第二步”的类（不要删除“第一步”）。当他们再次单击“下一步”时，添加第三个类“第三步”

然后在CSS中，使用如下规则：

#progressbar.step-one .first {
  //show me highlighted
}
#progressbar.step-two .second {
  //show me highlighted
}
#progressbar.step-three .third {
  //show me highlighted
}

如果为“下一步”按钮提供一个ID，该ID就是要应用于进度条的类，则可以在一次单击事件中处理所有这些

e、 g.如果第一个“下一步”按钮如下所示：

<label for="Next">
  <input id="go-to-step-two" type="button" name="next" class="next action-button" value="Next" />
</label>

$('.next').click(function(e) {
    var currentPage = this.attr('id').replace('go-to-', ''); //e.g. 'step-two'
    $('#progressbar').class(currentPage);
});

对后退按钮使用相同的逻辑，只是根据后退按钮的id删除类

---

希望这能有所帮助。

看起来太复杂了。与其跟踪谁有或没有.active类，我会将其从列表中全局删除，然后在当前需要的地方添加class（）。因此，在使用JSFIDLE时，当我在第一页上单击“下一步”并开始“描述您的请求”时这三个栏都满了。事实上，我今天早上刚做的。看起来很相似。$（'li'，$progressMeter.）。removeClass（'active done'）；$（'step2'，'progressMeter'）。addClass（'active'）。prevAll（）。addClass（'done'）Bojan非常感谢您的回答。效果非常好。

$(document).ready(function () {
    $('.next').click(function () {
        $('.current').removeClass('current').hide().next().show().addClass('current');
        $('#progressbar li.active').next().addClass('active');
        if ($('#progress')) {};

    });

    $('.previous').click(function () {
        $('.current').removeClass('current').hide().prev().show().addClass('current');
        $('#progressbar li.active').removeClass('active').prev().addClass('active');
    });
});

#progressbar.step-one .first {
  //show me highlighted
}
#progressbar.step-two .second {
  //show me highlighted
}
#progressbar.step-three .third {
  //show me highlighted
}

<label for="Next">
  <input id="go-to-step-two" type="button" name="next" class="next action-button" value="Next" />
</label>

$('.next').click(function(e) {
    var currentPage = this.attr('id').replace('go-to-', ''); //e.g. 'step-two'
    $('#progressbar').class(currentPage);
});