[英]add/remove css class on the weightage
I have a div
container with 8 child div elements
which indicate a some color bars. 我有一个带有8 child div elements
的div
容器,这些8 child div elements
指示一些颜色条。 Each div block contains a weight-age
of 12.5%
. 每个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>
How would i replace the class progress-bar-fail
with progress-bar-success
for the value i get from API. 我如何用progress-bar-success
替换class progress-bar-fail
以获得我从API获得的值。 For instance if i get 12.5, i want the first child to have progress-bar-success
instead of progress-bar-fail
. 例如,如果我达到12.5,我希望第一个孩子获得progress-bar-success
而不是progress-bar-fail
。
If its 25
, then two child div should be replaced with progress-bar-success
instead of progrss-bar-fail
. 如果它的progrss-bar-fail
25
,则应将两个子div替换为progress-bar-success
而不是progrss-bar-fail
。
You can do something like this, 你可以做这样的事情,
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");
});
Take a look here: http://jsfiddle.net/77Kvk/3/ 在这里看看: http : //jsfiddle.net/77Kvk/3/
See this fiddle for a working test function: http://jsfiddle.net/NEWrq/5/ . 有关有效的测试功能,请参见此提琴: http : //jsfiddle.net/NEWrq/5/ 。
I dropped the hard-coded weight-age in favor of having it figure it itself, based on the number of percentage bars that exist. 我放弃了硬编码的体重年龄,而是根据现有的百分比条的数量自行计算体重。
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
Here's my attempt 这是我的尝试
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");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.