Как изменить цвет индикатора прогресса jQuery в ASP.net gridview?

Question

У меня есть Gridview со столбцом, который содержит значение индикатора выполнения. Мне удалось отобразить прогресс для каждой строки, но я ищу способ изменить цвет индикатора выполнения на основе другого столбца с логическим значением ( True/False). Если значение равно True, цвет становится зеленым. Если значение равно False, цвет становится красным. Мне удалось изменить один цвет индикатора выполнения, но я не смог сделать это в Gridview для каждой строки! Логический столбец - это состояние, а значение индикатора выполнения находится в процессе.

Заранее спасибо!

GridView в ASP:

Обновлено:

<Columns>
<asp:TemplateField>
    <ItemTemplate>
        <%# Container.DataItemIndex + 1 %>
    </ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="progress" HeaderText="Progress" SortExpression="progress" />
<asp:BoundField DataField="status" HeaderText="status" SortExpression="status" />
<asp:TemplateField>
<ItemTemplate>
   <div class="pbcontainer">
      <div class="progressbar"><span><%# Eval("progress") %>%</span></div>
      <div class="value" style="visibility:hidden; height:0; width:0;"> <%#         Eval("progress") %> </div>
      <div class="status" style="visibility:hidden; height:0; width:0;"> <%# Eval("status") %> </div>
  </div>
</ItemTemplate>
</asp:TemplateField>
</Columns>

Авторсценария:

ОБНОВЛЕНО:

  <script>
    $(function () {

        $('.pbcontainer').each(function () {

            var val = parseInt($(".value", this).text());
            var status = $(".status", this).text();

            var progressColor = "Orange";
            var progressBackColor = "lightYellow";
            if (status == "False") {
                progressColor = "Red";
                console.log(progressColor);
            }
            else {
                progressColor = "Green";
                console.log(progressColor);
            }

            $('.progressbar', this).progressbar({ value: val });
            $('.progressbar', this).css({ 'background': progressBackColor });
            $('.progressbar > div', this).css({ 'background': progressColor });
        });
    });
 </script>

Изменить: я обновил код, но все равно цвет всегда зеленый! вроде оператор If не работает?!

Answer 1

В вашем фрагменте значение в скрытом поле такое же, как в диапазоне для прогресса. Поэтому вы предпочитаете использовать одно и то же значение и принимать решение о раскраске.

Обновлено:

Например, вы допустили две строки со значениями true и false

<div class="progressbar"><span>70%</span></div>
<div class="progressbar"><span>20%</span></div>
<div class="status" style="visibility:hidden; height:0; width:0;">true</div>
<div class="status" style="visibility:hidden; height:0; width:0;">false</div>

Теперь вы можете прочитать значения в каждом элементе и соответственно их раскрасить.

   var progressColorRed = "Red";
    var progressColorGreen = "Green";
    var progressBackColor = "lightYellow";
    var progressLate = true;

 $('.progressbar').each(function(index, item) {
        var progressValue = $(".status").eq(index).text();
        console.log(progressValue);
        if(progressValue == "true")
        {
            $(item).css({ 'background': progressBackColor });
            $(item).css({ 'background': progressColorGreen });
        }
        else
        {
            $(item).css({ 'background': progressBackColor });
            $(item).css({ 'background': progressColorRed });
        }
 });

Вот демо скрипки того же