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

尝试下面的代码。

Answer 3

使用以下我命名为sample.php的代码 这里的值将从另一个文件data.php中收集，并根据提供的条件更改颜色

使用的语言：HTML，PHP，JS

sample.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 个答案: