Javascript 修改jQuery progressbar'；基于Gridview列的s颜色

我试图根据gridview中每行的boloean值（布尔值）修改progressbar的颜色。如果该值为True，则颜色为绿色，如果该值为False，则颜色为红色。但由于某些原因，设置颜色的条件不起作用

提前感谢：

Asp GridView代码：

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

%

脚本：

</style>

<link href="CSS/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-ui-1.10.3%20.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
    $(function () {
        $('.pbcontainer').each(function () {
            var val = parseInt($(".value", this).text());
            var status = $(".status", this).text();

            var progressColor = "Orange";
            var progressBackColor = "lightYellow";

            console.log(status);
            if (status == "False") {
                progressColor = "Red";
                //console.log("Condition met color red status Flase");
            }
            else if (status == "True") {
                progressColor = "Green";
                //console.log(progressColor);
                //console.log("Condition not met color Green status True");
            }

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

$（函数（）{
$（'.pbcontainer'）。每个（函数（）{
var val=parseInt（$（“.value”，this.text（））；
var status=$（“.status”，this）.text（）；
var progressColor=“橙色”；
var progressBackColor=“浅黄色”；
控制台日志（状态）；
如果（状态=“假”）{
progressColor=“红色”；
//console.log（“条件符合颜色红色状态Flase”）；
}
否则如果（状态=“真”）{
progressColor=“绿色”；
//console.log（progressColor）；
//console.log（“条件未满足，绿色状态为真”）；
}
$（'.progressbar'，this.progressbar（{value:val}）；
$（'progressbar'，this.css（{'background'：progressBackColor}）；
$（'.progressbar>div'，this.css（{'background'：progressColor}）；
});
});

由于状态周围有额外的空格，因此条件为非真

您需要修改您的代码来像这样修剪空白

 var status = $.trim( $(".status", this).text() );

查看此演示 试试这个：

<script type="text/javascript">
    $(function () {
        $('.pbcontainer').each(function () {
            var this_Progress = $(this);
            var val = parseInt($.trim(this_Progress.find('.value').text()));
            var status = $.trim(this_Progress.find('.status').text())

            var progressColor = "Orange";
            var progressBackColor = "lightYellow";

            console.log(status);
            if (status == "False") {
                progressColor = "Red";
                //console.log("Condition met color red status Flase");
            }
            else if (status == "True") {
                progressColor = "Green";
                //console.log(progressColor);
                //console.log("Condition not met color Green status True");
            }
            this_Progress.find('.progressbar').progressbar({ value: val });
            this_Progress.find('.ui-progressbar').css({ 'background': progressBackColor });
            this_Progress.find('.ui-progressbar-value').css({ 'background': progressColor });

        });
    });
</script>

$（函数（）{
$（'.pbcontainer'）。每个（函数（）{
var this_Progress=$（this）；
var val=parseInt（$.trim（this_Progress.find（'.value'）.text（））；
var status=$.trim（此_Progress.find（'.status'）.text（））
var progressColor=“橙色”；
var progressBackColor=“浅黄色”；
控制台日志（状态）；
如果（状态=“假”）{
progressColor=“红色”；
//console.log（“条件符合颜色红色状态Flase”）；
}
否则如果（状态=“真”）{
progressColor=“绿色”；
//console.log（progressColor）；
//console.log（“条件未满足，绿色状态为真”）；
}
这个_Progress.find（'.progressbar'）.progressbar（{value:val}）；
这个_Progress.find（'.ui progressbar'）.css（{'background'：progressBackColor}）；
这个_Progress.find（'.ui progressbar value'）.css（{'background'：progressColor}）；
});
});

console.log（status）怎么说？@mahdilamb我检查了两行数据！和

console.log（状态）显示正确的日期！例如，第一行显示为
False
@mahdilamb，但当我将
else if
更改为
else
时，if语句中的某些行不起作用，其中一行显示并将所有进度条更改为绿色。