jquery - 使用 jQuery 动态改变进度条的颜色

Question

我有一个网格，它显示了系统驱动器空间。我在进度条格式的 gridview 列中显示 C 驱动器的空间。我从我的数据库绑定(bind) 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())
        });
    });
});

这是输出，我得到:

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

Answer 1

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

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

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

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

或类似的东西。