javascript - 进度条动态着色

Question

我创建了一个带有 Bootstrap 进度样式的表，其中我有一个动态表，其中有一个名为 Rank 的列，其中包含从 1 到 100 开始的几个值，并且通过使用 jquery 和 Bootstrap ，我将这些值转换为进度像 fiddle 中所示的栏。代码工作正常，但问题在于颜色，目前它将全部显示为蓝色，实际上我想要基于进度计数值的不同颜色，比如 10 - 黄色、20 - 蓝色、35 - 红色等，重复颜色应该只出现对于相同的值，否则颜色不同。颜色可以是动态的

我的代码如下

JSFiddle

$("#table").children("tbody").children("tr").each(function (i) {
    var col = $(this).children("td.value");
    console.log(col.html());
    var pro = '<div id="left"><div class="progress" id="percentage"><div class="progress-bar" style="display: block; float: right;width: ' + col.html() + '%;"></div></div></div><div id="right">&nbsp;' + col.html() + '</div>';
    col.html(pro);
});

谁能告诉我一些解决办法

Answer 1

查看此演示:http://jsfiddle.net/k1c9exLq/3/

首先创建一个包含 100 个具有不同动态颜色代码的元素的数组，然后根据您的排名使用它们。

JQUERY

var genCol = [];
for (var i=0; i<=100; i++)
    genCol.push('#'+(Math.random()*0xFFFFFF<<0).toString(16));

$("#table").children("tbody").children("tr").each(function (i) {
    var col = $(this).children("td.value");
    
    var pro = '<div id="left"><div class="progress" id="percentage"><div class="progress-bar" style="display:block; float:right; width:'+col.html()+ '%;background:'+genCol[col.html()]+'"></div></div></div><div id="right">&nbsp;' + col.html() + '</div>';
    
    col.html(pro);
});