过滤多行并使用类计数行以更改进度条

时间:2015-08-18 10:52:24

标签: javascript jquery css twitter-bootstrap

大家好,我一直在研究一个项目并学习一些Bootstrap,但我现在确实需要你的帮助。当它进入jquery时,我是一个完整的菜鸟,所以我会接受它:

我的Fiddle会解释所有

  1. 第一个问题是进度条,我需要它是动态的我 已经设置了表格,然后标记完成一行 获得成功:"成功"我想做的就是取得进步 bar计算行"成功并显示进度到目前为止 如果10行中的4行有一个成功的类,那么进度条应该 阅读40%。
  2. 以下是我的进度条现在:

    <div class="progress">
       <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70"    aria-valuemin="0" aria-valuemax="100" style="width:70%">70%</div>
    </div>
    
    1. 我需要能够在桌面上应用过滤器,但我也应该能够一次应用多个过滤器:例如,所有&#34;侧面任务&#34;在&#34;地区a&#34;但只有&#34;未完成&#34;介于&#34; lvl 1 - 10&#34;
    2. 之间

      我已经为每个过滤器菜单设置了过滤器菜单以及一些带有数据属性的菜单。

      任何帮助都会很棒!

1 个答案:

答案 0 :(得分:1)

编辑:这是问题中第1点(进度条)的解决方案。

以下javascript完成了进度条Demo here

的工作

你应该首先在html

中用0开始进度条
var successRows = $(this).parents("tbody").children(".success").length;
var totalRows = $(this).parents("tbody").children("tr").length;
var progressPerc = ((successRows / totalRows) * 100) + "%";
$(".progress-bar").width(progressPerc).text(progressPerc);