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

Question

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

这是 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 class "warning" 背景色为红色。将条形的默认颜色设置为绿色。如果值大于 90，则将 class "warning" 添加到进度条，否则删除 class "warning".

JQuery adding/removing class 的代码示例可在此处找到： https://api.jquery.com/addclass/

你可能会这样结束：

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

或类似的东西。

Answer 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");
}
});
});

Answer 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>

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

Change the color of progress bar dynamically using jQuery

css

asp.net

jquery

gridview

progress-bar