Jquery 如何添加根据进度更改颜色的多色百分比栏？

我用来获取进度和添加百分比的Jquery

/* getting the percentage of the multi step verification */

$('.track').change(function(e) {
    update_percentage();
});
// supports any number of inputs and calculates done as %
function update_percentage() {
    var count = $('.track').length;
    var length = $('.track').filter(function() {
        return this.value;
    }).length;
    var done = Math.floor(length * (100 / count));
    $('.perc').text(done);

    $('.meter').width(done + "%");

        $(document).ready(function(){
        $a = done;
        $("#applicant_percentages").val($a);
    });
}

这是进度表以条形图和百分比显示的位置

<div class="progress-meter">
        <h5>Profile Strength <span class='perc'>0</span>%</h5>
        <span class="meter"></span>
        <br>
    </div>

我得到的是填写在表格中的输入数量的百分比！我已将我获取的值放入进度条中。。但是现在，当进度条的颜色达到某个值时，需要更改什么呢

---

如果我不清楚，我很抱歉

给定包含所需频带的数组

let colors = [
    {max:20,color:'red'}, 
    {max:75,color:'yellow'},
    {max:100,color:'green'}];

您可以使用

数组查找正确的颜色。根据
完成的
数量查找
：

var color = colors.find(x => x.max >= done).color;

并使用jQuery
css

$('.meter').width(done + "%").css('background-color',color);

下面是一个活生生的例子：
/*获取多步骤验证的百分比*/
$（'.track'）.change（函数（e）{
更新_百分比（）；
});
让colors=[{max:20，color:'red'}，{max:75，color:'yellow'}，{max:100，color:'green'}]；
//支持任意数量的输入，计算完成百分比
函数更新_百分比（）{
变量计数=$（'.track'）。长度；
变量长度=$（'.track'）.filter（函数（）{
返回此.value；
}).长度；
var done=数学地板（长度*（100.0/计数））；
var color=colors.find（x=>x.max>=done）.color；
$（'.perc'）.text（完成）；
$（'.meter'）.width（完成+“%”）.css（'background-color'，color）；
}
.meter{
显示：内联块；
宽度：0；
高度：20px；
边缘底部：10px；
背景颜色：绿色；
}

型材强度0%


给定包含所需频带的数组

let colors = [
    {max:20,color:'red'}, 
    {max:75,color:'yellow'},
    {max:100,color:'green'}];

您可以使用
数组查找正确的颜色。根据
完成的
数量查找
：

var color = colors.find(x => x.max >= done).color;

并使用jQuery
css

$('.meter').width(done + "%").css('background-color',color);

下面是一个活生生的例子：
/*获取多步骤验证的百分比*/
$（'.track'）.change（函数（e）{
更新_百分比（）；
});
让colors=[{max:20，color:'red'}，{max:75，color:'yellow'}，{max:100，color:'green'}]；
//支持任意数量的输入，计算完成百分比
函数更新_百分比（）{
变量计数=$（'.track'）。长度；
变量长度=$（'.track'）.filter（函数（）{
返回此.value；
}).长度；
var done=数学地板（长度*（100.0/计数））；
var color=colors.find（x=>x.max>=done）.color；
$（'.perc'）.text（完成）；
$（'.meter'）.width（完成+“%”）.css（'background-color'，color）；
}
.meter{
显示：内联块；
宽度：0；
高度：20px；
边缘底部：10px；
背景颜色：绿色；
}

型材强度0%


这可能会帮助您：这是否回答了您的问题@阿披舍克潘迪-暗示别人有相同的链接有什么用？你能不能用一张粗略的图片来显示你到底想要什么对不起，我不清楚。。我在上面添加了一个图片，让事情变得更清楚！这可能会帮助你：这是否回答了你的问题@阿披舍克潘迪-暗示别人有相同的链接有什么用？你能不能用一张粗略的图片来显示你到底想要什么对不起，我不清楚。。我在上面添加了一个图片，让事情变得更清楚！谢谢你，这正是我想要的！谢谢你也曾帮助过我的人！谢谢你，这正是我想要的！谢谢你也曾帮助过我的人！