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%。但是，您可以很容易地将其与自己的代码一起使用。我使用了一个监听器，每次您增加progressbar值时都会通知它！

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>

希望这能有所帮助！