Bootstrap 进度条颜色根据宽度值动态变化答案

【问题标题】：Bootstrap progress bar colour change according to width value dynamicallyBootstrap 进度条颜色根据宽度值动态变化
【发布时间】：2020-11-04 11:04:15
【问题描述】：

我创建了一个进度条。正在从数据库中获取值。现在我想对进度条的颜色进行分类，例如宽度值是否低于 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");
  }
		
});

【问题讨论】：

使用width()函数代替.css('width')

标签： javascript css progress-bar

【解决方案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>

【讨论】：

对不起，它不起作用。我从数据库中检索了进度宽度值
我调整了代码，它应该适用于您的 aria-valuenow 属性和元素列表

【解决方案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;
}

【讨论】：

它不起作用。它为每个条形赋予绿色
您的像素宽度，因此请尝试使用 10 个或更少的宽度，或者您可以将宽度转换为百分比
对不起，我不明白你的意思。从数据库中获取进度宽度值。

【解决方案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

结果：

【讨论】：

【解决方案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";

【讨论】：