如何在Bootstrap 3中动态更改进度条类？

Question

我有一些像这样的简单进度条：

<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 35%">
    Youtube Connection <span class="glyphicon glyphicon-zoom-out"></span>
    </div>
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 35%">
        Verify Information <span class="glyphicon glyphicon-pencil"></span>
    </div>
</div>

第二个进度条的颜色为绿色。 我有一个按钮

<a class="btn btn-lg btn-primary" role="button" onclick="changeColor();">Next Step</a>

我希望函数changeColor()将第二个导航栏的颜色（绿色）class="progress-bar-success "更改为class="progress-bar-info"

我举个例子：

http://bootply.com/102834

我该怎么做？

Answer 1

这可以通过大量的jQuery魔术来实现。如果你很兴奋，这是jsfiddle。

<强> HTML

首先将类.change添加到按钮中以进行回调。

<a class="change btn btn-lg btn-primary pagination-centered">Next Step</a>

<强>的jQuery

   $( ".change" ).click(function() {
  $('.progress_2').removeClass("progress-bar-success");
    $('.progress_2').addClass("progress-bar-info");
});

在3行中实现这一目标的方法较短：

$( ".change" ).click(function() {
  $('.progress_2').removeClass("progress-bar-success").addClass("progress-bar-info");
});

<强>结果