使用jQuery动态更改进度条的颜色答案

【问题标题】：Change the color of progress bar dynamically using jQuery使用jQuery动态更改进度条的颜色
【发布时间】：2015-08-10 08:34:17
【问题描述】：

我有一个网格，显示系统驱动器空间。我在进度条格式的 gridview 列中显示 C 驱动器的空间。我从我的数据库绑定gridview。假设如果驱动器空间值大于 90，我需要将进度条颜色显示为红色，否则为绿色。

这是gridview栏的源码：

<Columns>
     <asp:TemplateField>
          <ItemTemplate>
                 <div class='progress'>
                     <div class="progress-label"><%# Eval("C") %></div>
                 </div>
          </ItemTemplate>
      </asp:TemplateField>
</Columns>

.ui-progressbar {
    position: relative;
}

.progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

body {
    font-family: Arial;
    font-size: 10pt;
    }

$(function () {
    $(".progress").each(function () {
        $(this).progressbar({
            value: parseInt($(this).find('.progress-label').text())
        });
    });
});

这是输出，我得到：

如何在运行时动态改变进度条的颜色？

【问题讨论】：

jsfiddle.net/arunpjohny/nb3ze2rw/2 ?
根据进度标签你可以改变颜色。例如，如果标签值大于 90，您可以将红色添加到 div
谢谢阿伦·P·约翰尼。你的答案有效。我把你的答案放在答案部分。

标签： jquery css asp.net gridview progress-bar

【解决方案1】：

创建背景颜色为红色的 CSS 类“警告”。将栏的默认颜色设置为绿色。如果值大于 90，则将类“警告”添加到进度条，否则删除类“警告”。

可以在这里找到用于添加/删除类的 JQuery 代码示例： https://api.jquery.com/addclass/

你可能会得到这样的结果：

if(value>90) {
    $( this ).addClass( "warning" );
} else {
    $( this ).removeClass( "warning" );
}

或类似的东西。

【讨论】：

【解决方案2】：

试试这个；

$(function () {
$(".progress").each(function () {
value= parseInt($(this).find('.progress-label').text())
$(this).progressbar({
value: parseInt($(this).find('.progress-label').text())
});

if(value>90) {
$( this ).css( "background","orange");
} else {
$( this ).css( "background","blue");
}
});
});

【讨论】：

【解决方案3】：

这个答案很好用。感谢 Arun P Johny。

 jQuery:

 $(function () {
        $(".progress").each(function () {
            var $this = $(this),
                value = parseInt($this.find('.progress-label').text());
            $this.progressbar({
                value: value
            });
            if (value < 90) {
                $this.addClass('under')
            } else {
                $this.addClass('over')
            }
        });
    });

 css:

 .over .ui-progressbar-value {
     background-color: red;
     background-image: none;
  }

  .under .ui-progressbar-value {
     background-color: blue;
     background-image: none;
  }

GridView Column:

<Columns>
     <asp:TemplateField>
         <ItemTemplate>
            <div class='progress'>
                 <div class="progress-label">
                      <%# Eval("C") %>
                 </div>
            </div>
        </ItemTemplate>
     </asp:TemplateField>
 </Columns>

【讨论】：