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

我有一个网格，它显示了系统驱动器空间。 我在进度条格式的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())
        });
    });
});

这是输出，我得到：

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

---

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

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

你可能会得到这个结果：

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

或类似的东西。

---

尝试这个;

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

---

这个答案很好。 感谢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>

链接地址: http://www.djcxy.com/p/31029.html

上一篇: Change the color of progress bar dynamically using jQuery

下一篇: yii2:jquery if gridview column contains specific value than change color