bootstrap progress-bar. Jak zmienić kolor dynamicznie?

Question

Chciałabym, żeby paski postępu z bootstrapa zmieniały swój kolor dynamicznie. Przy przekroczeniu powiedzmy 60% kolor z ustalonego (w momencie przekroczenia) zmienia się na czarny (paski są dynamiczne, "ładują się"). To moje pierwsze kroki z javascriptem, jquery i mam problem. Pod spodem kod, którego próbowałam. Niestety kolor zmienia się na czarny od razu w momencie startu, a do tego z jakiegoś powodu obejmuje wszystkie paski, nawet te, które nie mają przekroczonych 60%. Będę wdzięczna za pomoc.

 

 <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                        HTML5/CSS3
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                        BOOTSTRAP
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
                        JAVASCRIPT(JQUERY)
                    </div>
                </div>

                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                        RWD
                    </div>
                </div>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
                        WORDPRESS
                    </div>
                </div>

 

 

 

var progressBar=$('.progress-bar');
var breakpoint= $('.progress-bar').attr('aria-valuenow');

if (breakpoint >=60){
    $(".progress-bar").css('background-color', 'black');
}

 

Answer 1

Hej,

fajną, szybką łamigłówkę mi zadałaś :D ogólnie zrobiłbym to tak:

HTML:

  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
      HTML5/CSS3
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
      BOOTSTRAP
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
      JAVASCRIPT(JQUERY)
    </div>
  </div>

  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
      RWD
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
      WORDPRESS
    </div>
  </div>

Jak widzisz dodałem sobie width'y, żeby sprawdzać czy wizualnie się zgadza i faktycznie zmienia kolor.

Dodatkowo dodałem CSS'y: 

  <style>
    .progress-bar-red {
      background-color: red !important;
    }

    .progress-bar-black {
      background-color: black !important;
    }
  </style>

i to co nas interesuje najbardziej, czyli js:

  <script type="text/javascript">
    $(function() {
      var elementy = document.getElementsByClassName('progress-bar');
      for (var i = 0; i < elementy.length; ++i) {
        var progressBar = elementy[i];
        var breakpoint = $(elementy[i]).attr('aria-valuenow');
        if (breakpoint >= 60) {
          $(progressBar).addClass("progress-bar-black");
        } else {
          $(progressBar).addClass("progress-bar-red");
        }
        console.log(breakpoint);
        console.log(progressBar);
      }


    });
  </script>

Jak widzisz rozwiązałem to zadanie na tablicach. Twoje rozwiązanie miało jedną, zasadniczą wadę - pobierało wartość pierwszego elementu o danej klasie i kolorowało wszystkie progress-bary właśnie na podstawie wartości z 1 elementu. U mnie zauważysz pętle, która pobiera wartość valuenow dla każdego elementu o danej klasie po kolei, przyrównuje czy jest większy, bądź równy 60. Jeżeli tak to dodaje klasę, która zmienia kolor - kolory można też zmieniać tak jak to zrobiłaś u siebie, po prostu do swojego sposobu już się przyzwyczaiłem :) Jeżeli nie jest większy niż 60 to bar dostaje kolor czerwony.

Absolutnie nie jestem żadnym zawodowcem w tej dziedzinie i domyślam się, że moje rozwiązanie też nie jest idealne :D Jeżeli coś jest dla Ciebie dalej niejasne to zapraszam do zadawania pytań - odpowiem w miarę możliwości :D

Comments

Bardzo szczegółowo wszystko wytłumaczyłeś, więc wszystko jest jasne! Bardzo dziękuję :) Nie jest to jednak do końca takie rozwiązanie jak chciałam, chociaż i tak satysfakcjonujące. Zależało mi żeby paski zaczynały od tego samego koloru, po czym te które przekraczają wartość 60%, gładko zmieniały kolor na inny. Mimo wszystko dzięki za odzew, bo Twoje rozwiązanie i tak jest  bardzo pomocne :)