Почему всегда выводит тот же цвет?

Question

[Lavrov95]

<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>

<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>

Answer 1

[Elwen]

Если вы хотите использовать на странице несколько .progress-bar, то необходимо использовать $.each, что бы код пробежался по каждому блоку. Сейчас код находит первый элемент, проверяет его ширину и применяет стили ко всем блокам с заданными параметрами.
Если же у вас будет только один .progress-bar на странице, то тестируйте используя один .progress-bar, изменяя его ширину.