基于值范围动态更新引导进度条的背景颜色的 jQuery 代码

Question

我正在尝试编写 jQuery 代码来根据进度条的宽度更新引导进度条的背景颜色。因此，例如，如果它低于 50%，那么该条应该是红色的。如果它在 50-70% 之间，进度条应该是黄色的，如果它高于 70%，它应该是绿色的。我需要代码来获取进度条的值并检查这些范围并更改背景。

HTML

<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:100%" aria-valuenow="100" aria-valuemin="0" aria-valumax="100" >100%</div></div></td>
<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:80%" aria-valuenow="80" aria-valuemin="0" aria-valumax="100" >80%</div></div></td>
<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:90%" aria-valuenow="90" aria-valuemin="0" aria-valumax="100" >90%</div></div></td>

jQuery

<script>
	var value = $('.progress-bar').css('width'); 							    
	$(document).ready(function(){
	  if(value < 50){
	  $('.progress-bar').css('background-color', 'red'); 
	  } 
	  else if(value >= 50) && (value < 70){
	  $('.progress-bar').css('background-color', 'yellow');
	  }
	});  
</script>

<tr>
		                    				<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:98%" aria-valuenow="98" aria-valuemin="0" aria-valumax="100" >98%</div></div></td>
		                    				<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:72%" aria-valuenow="72" aria-valuemin="0" aria-valumax="100" >72%</div></div></td>
		                    				<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:82%" aria-valuenow="82" aria-valuemin="0" aria-valumax="100" >82%</div></div></td>
		                    				<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:56%" aria-valuenow="56" aria-valuemin="0" aria-valumax="100" >56%</div></div></td>
		                    				<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:75%" aria-valuenow="75" aria-valuemin="0" aria-valumax="100" >75%</div></div></td>
		                    				<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:100%" aria-valuenow="100" aria-valuemin="0" aria-valumax="100" >100%</div></div></td>
		                    				<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:30%" aria-valuenow="30" aria-valuemin="0" aria-valumax="100" >30%</div></div></td>
		                    				<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:33%" aria-valuenow="33" aria-valuemin="0" aria-valumax="100" >33%</div></div></td>
		                    				<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:77%" aria-valuenow="77" aria-valuemin="0" aria-valumax="100" >77%</div></div></td>
		                    				<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:98%" aria-valuenow="98" aria-valuemin="0" aria-valumax="100" >98%</div></div></td>
		                    				<td><div class="progress"><div class="progress-bar" role="progressbar" style="width:98%" aria-valuenow="98" aria-valuemin="0" aria-valumax="100" >98%</div></div></td>
		                    			</tr>

Answer 1

我做的很快，所以有一些问题，比如最大栏大于 100%。但是，您可以轻松地将其与您自己的代码一起使用。 我使用了一个监听器，每次您增加进度条值时都会收到通知！

class Listener {
  constructor(value){
    this.value = value;
    this.bar = $('.progress-bar');
  }
  
  notify(value){
    $('#message').text(value);
   
    if (value < 25){
      this.bar.css('background-color', 'red');
    }
    else if (value < 50){
      this.bar.css('background-color', 'blue');
    }
    else{
      this.bar.css('background-color', 'yellow');
    }
  }
};

let listener = new Listener(0);

let timer = setInterval(function(){
    let width = $('.progress-bar').width();
    if (width >= 100) clearInterval(this);
    let newValue = (($('.progress-bar').width() + 100) / $('.progress').width()) * 100;
    $('.progress-bar').width($('.progress-bar').width() + 100);
    listener.notify(newValue);
}, 1000);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
  <div id="progress" class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div id="message"></div>

希望这有帮助！