jquery - 如何添加根据进度更改颜色的多色百分比条？

Question

我用来获取进度并添加百分比的 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>

CSS

.meter {
 display: inline-block;
  width: 0;
  height: 20px;
  margin-bottom: 10px;
  background-color:green;
}

我得到了填写表格的输入数量的百分比！我已经将我所接受的值放入进度条.. 但是现在需要改变进度条的颜色，一旦它们达到某些值。

如果我不清楚，对不起！

标签： jqueryhtmlcss

Answer 1

给定一个包含所需波段的数组

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

您可以Array.find根据done数量找到正确的颜色：

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

并使用 jQuery 将其应用于您的进度条css

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

下面的实时示例：

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

$('.track').change(function(e) {
    update_percentage();
});

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


// 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.0 / count));
    var color = colors.find(x => x.max >= done).color;
    
    $('.perc').text(done);

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

.meter {
 display: inline-block;
  width: 0;
  height: 20px;
  margin-bottom: 10px;
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">

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