加權/刪除權重的css類

我有一個div容器與8 child div elements這表明一些彩條。每個div區塊包含12.5%的weight-age。加權/刪除權重的css類

<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-fail與progress-bar-success爲i的值從API得到。例如，如果我得到12.5，我想第一個孩子有progress-bar-success，而不是progress-bar-fail。

如果它的25，那麼應將兩個子div替換爲progress-bar-success而不是progrss-bar-fail。

來源

2014-07-06 Shane

你把你由12.5 API獲取的號碼，然後你有，你必須改變類元素的數量... – CBroe

好奇，因爲它沒有在你的問題中解決：如果它是13.5呢？向下舍入到最近？或者總是四捨五入？ –

@PeteScott：你能把它四捨五入到最近......感謝皮特的答案。 – Shane

的工作測試功能，請參閱本琴：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

來源

2014-07-06 15:20:10

請注意，我的代碼可能會錯誤地在元素上放置多個「progress-bar-success」類，並且在給定新數字時html不會重置（成功不會更改爲失敗）。我會更新小提琴以確保其正常工作。（更新爲NOTED） –

小提琴/代碼的另一個更新（我是從零開始的） –

您非常歡迎，先生。 –

你可以做這樣的事情，

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/

來源

2014-07-06 15:18:35 j809

這是我嘗試

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"); 
}

Demo

來源

2014-07-06 15:37:14

加權/刪除權重的css類

回答

相關問題