Динамическое изменение цвета индикатора выполнения с помощью jQuery

Question

У меня есть сетка, которая показывает пространство на системном диске. Я показываю пространство C-диска в столбце gridview в формате шага выполнения. Я привязываю gridview от моего db. Предположим, что если объем дискового пространства больше 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

Этот ответ работает нормально. Спасибо Арун П. Джонни.

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> 

Answer 2

Создать CSS-класс «предупреждение» с цветом фона красного цвета. Установите цвет по умолчанию для панели на зеленый. Если значение больше 90, добавьте класс «предупреждение» в индикатор выполнения, иначе удалите класс «предупреждение».

примеры JQuery код для добавления/удаления класса можно найти здесь: https://api.jquery.com/addclass/

Вы могли бы закончить с этим:

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

Или что-то подобное.

Answer 3

Попробуйте это;

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