根据取值范围动态更新引导进度条背景颜色的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>

​

希望这能有所帮助！