Bootstrap 進度條顏色根據寬度值動態變化

Question

我創建了一個進度條。 正在從數據庫中獲取值。 現在我想對進度條的顏色進行分類，比如寬度值是否低於 50，所以進度條顏色為紅色。 如果值大於 50 且小於 90，則顏色為藍色，如果值為 100，則顏色為綠色。

進度條顯示在表格單元格中。 和值是從數據庫中獲取的

 <tr class="success"> <td><?php echo "$row->ID"; ?></td> <td><?php echo "$row->name"; ?></td> <td><div class="progress" style = "height:24px;width:200px"> <div class="progress-bar" id = "newprogress" role="progressbar" aria-valuenow="<?php echo "$row->Percentage"; ?>" style = "width :<?php echo "$row->Percentage"; ?>%";> <?php echo "$row->Percentage" ?>% </div> </div> <td>

因為我在這里嘗試了其中一種解決方案

 $(document).ready(function(){ var bar = parseInt($("#newprogress").width()); if (bar >= 90) { $("#newprogress").removeClass("bckColor").addClass("bar-success"); } else if (bar >= 50 && bar < 90) { $("#newprogress").removeClass("bar-success").addClass("bckColor"); } });

Answer 1

我認為您選擇了錯誤的元素。

 $(document).ready(function() { var bars = $('.progress-bar'); for (i = 0; i < bars.length; i++) { console.log(i); var progress = $(bars[i]).attr('aria-valuenow'); $(bars[i]).width(progress + '%'); if (progress >= "90") { $(bars[i]).addClass("bar-success"); } else if (progress >= "50" && progress < "90") { $(bars[i]).addClass("bar-warning"); } else { $(bars[i]).addClass("bar-error"); } } });

 .progress { width: 200px; height: 24px; border-radius: 10px; background-color: #F1F1F1; margin-bottom: 10px; } .progress-bar { border-radius: 10px; height: 24px; display: block; } .bar-warning { background-color: yellow; } .bar-success { background-color: green; } .bar-error { background-color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="progress" style="heigt:24px;width:200px"> <div class="progress-bar" name="progress" role="progressbar" aria-valuenow="90"></div> </div> <div class="progress" style="heigt:24px;width:200px"> <div class="progress-bar" name="progress" role="progressbar" aria-valuenow="30"></div> </div> <div class="progress" style="heigt:24px;width:200px"> <div class="progress-bar" name="progress" role="progressbar" aria-valuenow="50"></div> </div>

Answer 2

試試下面的代碼。

$(document).ready(function(){

var bar = parseInt($('.progress').width());

    if (bar >= 90){


        $(".progress").removeClass("bckColor").addClass("success");
        }
    else if (bar >= 50){

        $(".progress").removeClass("success").addClass("bckColor");
        }
});



.bckColor {
    background-color: blue !important;
}

.success {
    background-color: green !important;
}

Answer 3

使用下面我命名為 sample.php 的代碼這里的值將從另一個文件 data.php 中收集並根據提供的條件更改顏色

使用語言：HTML、PHP、JS

示例.php

            <!DOCTYPE html>
            <html>
                <head>
                    <title></title>
                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                        <?php require_once('data.php'); ?>
                        <script>
                var myVar = setInterval(inter, 1000);
                function inter() {

                        document.getElementById("boot").style.width = 
                            <?php echo $x; ?>+"%";
                        document.getElementById("boot").innerHTML = 
                            <?php echo $x; ?>+"%";
                            if (
                            <?php echo $x; ?>< 90)
                            {
                                document.getElementById("boot").className = "progress-bar progress-bar-danger";
                            }
                             else
                             {
                                document.getElementById("boot").className = "progress-bar progress-bar-success";
                                }
            }


                        </script>
                    </head>
                    <body>
                        <table>
                            <td>
                                <div class="progress" style = "height:24px;width:200px">
                                    <div name="progress" role="progressbar" id="boot" aria-valuenow="
                                        <?php echo'$row->Percentage';?>" >
                                    </div>
                                </div>
                            </td>
                        </table>
                    </body>
                </html>

這是 data.php

結果：

Answer 4

我意識到您在尋求 JavaScript 解決方案，但這可以（在某種程度上）在 PHP 中實現。

您已經在 PHP 腳本中使用變量來設置 HTML 輸出的值，那么為什么不為進度條的顏色做同樣的事情呢？

此示例使用默認的 Bootstrap 顏色，但您可以根據需要替換其他顏色：

    // Value retrieved from the database. This can be a percentage (which may be easier
    // to work with or just use the raw value depending on your needs)
    $valueFromDatabase = 9;

    // This will give us a green bar, 9% wide.

    // Use the switch command to set the output colour (using the Bootstrap 
    // default colours Primary, Warning, Danger, Success etc. Set these as you need.
    switch ($valueFromDatabase) {

        case ($valueFromDatabase <= 10):
            $bar_colour = "success";
        break;
        case (($valueFromDatabase > 10) && ($valueFromDatabase <= 30)):
            $bar_colour = "warning";
        break;
        case ($valueFromDatabase > 30):
            $bar_colour = "danger";
        break;
    }

    // Now we use $bar_colour to set the colour in the output below.
    // Width set to the value retrieved from the database

    echo "<div class='row'>\n
        <div class='col-md-12'>\n
            <h4>Your Progress Bar</h4>\n
            <div class='progress md-progress pos-rel' style='height:25px'>\n
                <div class='progress-bar progress-bar-$bar_colour progress-bar-striped' style='width:$valueFromDatabase%; height: 25px'>
                    <span style='line-height: 25px'>$valueFromDatabase%</span>
                </div>\n
            </div>\n
        </div>\n
        </div>\n";

Bootstrap 進度條顏色根據寬度值動態變化

問題描述

4 個解決方案

解決方案1
1 已采納 2018-07-20 05:32:07

解決方案2
0 2018-07-20 05:29:50

解決方案3
0

解決方案4
0 2020-11-04 00:05:14

Bootstrap 進度條顏色根據寬度值動態變化

問題描述

4 個解決方案

解決方案1 1 已采納 2018-07-20 05:32:07

解決方案2 0 2018-07-20 05:29:50

解決方案3 0

解決方案4 0 2020-11-04 00:05:14

解決方案1
1 已采納 2018-07-20 05:32:07

解決方案2
0 2018-07-20 05:29:50

解決方案3
0

解決方案4
0 2020-11-04 00:05:14