在权重上添加/删除css类

Question

我有一个带有8 child div elements的div容器，这些8 child div elements指示一些颜色条。 每个div块的weight-age为12.5% 。

<div class="progress-stacked" id="progress-div">
    <div class="progress-bar progress-bar-fail" style="width: 10%; margin-right: 11px;"></div>
    <div class="progress-bar progress-bar-fail" style="width: 10%; margin-right: 11px;"></div>
    <div class="progress-bar progress-bar-fail" style="width: 10%; margin-right: 11px;"></div>
    <div class="progress-bar progress-bar-fail" style="width: 10%; margin-right: 11px;"></div>
    <div class="progress-bar progress-bar-fail" style="width: 10%; margin-right: 12px;"></div>
    <div class="progress-bar progress-bar-fail" style="width: 10%; margin-right: 12px;"></div>
    <div class="progress-bar progress-bar-fail" style="width: 10%; margin-right: 12px;"></div>
    <div class="progress-bar progress-bar-fail" style="width: 10%;"></div>
</div>

我如何用progress-bar-success替换class progress-bar-fail以获得我从API获得的值。 例如，如果我达到12.5，我希望第一个孩子获得progress-bar-success而不是progress-bar-fail 。

如果它的progrss-bar-fail 25 ，则应将两个子div替换为progress-bar-success而不是progrss-bar-fail 。

Answer 1

你可以做这样的事情，

var value = 12.5;/*somevalue from your API*/
var targetindex = value/12.5;
targetindex = Math.floor(targetindex);
$(".progress-bar").each(function(i){
    if(i<targetindex)
        $(this).removeClass("progress-bar-fail").addClass("progress-bar-success");
});

在这里看看： http : //jsfiddle.net/77Kvk/3/

Answer 2

有关有效的测试功能，请参见此提琴： http : //jsfiddle.net/NEWrq/5/ 。

我放弃了硬编码的体重年龄，而是根据现有的百分比条的数量自行计算体重。

var testProgressUpdate = function(per)
{
    var totalBars = $(".progress-bar").length;
    var barsToModify = totalBars * (per / 100);
    barsToModify = Math.round(barsToModify);
    $(".progress-bar").removeClass().addClass("progress-bar").addClass("progress-bar-fail");
    $(".progress-bar").each(function(i)
    {
        if (i >= barsToModify) return false;        
        $(this).removeClass("progress-bar-fail").addClass("progress-bar-success");
    });
}
testProgressUpdate(50); // 4 bars
//testProgressUpdate(12.5); // 1 bar
//testProgressUpdate(13.5); // 1 bar
//testProgressUpdate(24); // 2 bars

Answer 3

这是我的尝试

function progressUpdate(value) {
  var n = Math.floor(value / 12.5);
  $(".progress-bar:lt(" + n + ")").removeClass("progress-bar-fail").addClass("progress-bar-success");
  $(".progress-bar:gt(" + (n-1) + ")").removeClass("progress-bar-success").addClass("progress-bar-fail");
}

演示版