Why is it always displays the same color?

<div class="progress">
 <div class="progress-bar" style="width:10%"></div>
</div>
 <div class="progress">
 <div class="progress-bar" style="width:50%"></div>
</div>
 <div class="progress">
 <div class="progress-bar" style="width:80%"></div>
</div>


the <script>
 $(document).ready(function () {
 var width = $(".progress-bar").width() / $('.progress-bar').parent().width() * 100;

console.log(width);
 if (width >=0) {
 $(".progress-bar").css("background-color", "#f44242");
}
 if (width >= 15) {
 $(".progress-bar").css("background-color", "#f48f41");
}
 if (width >= 30) {
 $(".progress-bar").css("background-color", "#f4cd41");
}
 if (width >= 45) {
 $(".progress-bar").css("background-color", "#a9f441");
}
 if (width >= 60) {
 $(".progress-bar").css("background-color", "#41f464");
}
 if (width >= 75) {
 $(".progress-bar").css("background-color", "#41acf4");
}
 if (width >= 90) {
 $(".progress-bar").css("background-color", "#414ff4");
}
});
</script>
June 3rd 19 at 18:56
1 answer
June 3rd 19 at 18:58
If you want to use some .progress-bar, you must use $.each would be that the code ran on each block. Now the code finds the first element, checks its width and applies the styles to all of the blocks with the specified parameters.
If you have one .progress-bar on the page, the test using one .progress bar by changing its width.

Find more questions by tags CSS