根据 GridView 列值添加进度条的类：jQuery

Question

我有一个网格，其中有一个名为“C”的列，它指定了 C:\ 驱动器。在该列中，我在引导进度条中显示已用空间。

我已经完成了与gridview 的记录绑定。在这里，我想根据已用空间更改进度条类。假设，如果已用空间超过 90%，我想显示进度条危险，否则我想显示进度条信息。

The code, I have tried and the result I am getting is below:

<asp:TemplateField>
    <ItemTemplate>
         <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                 <%# Eval("C") %>
             </div>
         </div>
     </ItemTemplate>                                
 </asp:TemplateField>

 jQuery:

    <script type="text/javascript">

    $(function () {
        $(".progress").each(function () {
            var $this = $(this),
                value = parseInt($this.find('.progress-bar').text());
            $this.progressbar({
                value: value
            });
            // Here, "value" gives the used space value.
        });
    });

</script>

 Result:

如何根据值更改进度条类也对齐进度条文本对齐中心？请提出建议。

Answer 1

只需通过检查值将progress-bar-danger 类添加到.each 循环中即可。

$(function () {
  $(".progress").each(function (index, elem) {
    var $this = $(this),
        value = parseInt($this.find('.progress-bar').text());
        /*
        $this.progressbar({
            value: value
        });
        */
    if ( value > 90 ) {
      $(elem).find('.progress-bar').addClass('progress-bar-danger');
    }
    // Here, "value" gives the used space value.
  });
});

.container {
  margin-top: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          60%
        </div>
      </div>
      <br />
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 91%;">
          91%
        </div>
      </div>                
    </div>
  </div>
</div>