Question

我尝试编写js来根据其宽度为几个引导进度条设置动画。我编写简单的代码，但它不起作用，可能是因为它带有类进度条的第一个DOM元素的值。你能建议我怎么解决这个问题？非常感谢你:)

这是我的代码：

HTML

<h5>Zapotrzebowanie na kawę</h5>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70% Complete (danger)
    </div>
  </div>

  <h5>J. Angielski</h5>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      C1 (danger)
    </div>
  </div>
    <h5>j. Niemiecki</h5>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
      A2
    </div>
  </div>

JS

$(function () {
var cWidth = $('.progress-bar').css("width")
$(".progress-bar").animate({width: cWidth}, 1500)
});

修改所以我设法通过使用@streetlamp

提供的修改代码来解决问题

然而我对此并不十分满意，因此对它有点冻结。不够顺利。你有什么建议吗？

$(".progress-bar").css("width", "0px")
$(function() {
    $(".progress-bar").each(function() {
        var finalWidth = parseInt($(this).attr("aria-valuenow"));
        $(this).css("width", "0px").animate({width: finalWidth+"%"}, 1000);
    });
});

到目前为止，感谢您的帮助。

Answer 1

使用$.each()循环遍历元素，并将每个元素设置为元素的aria-valuenow参数的值（在生产中实际上不执行此操作，aria-valuenow应该是值< EM>现在）：

$(function() {
    $(".progress-bar").each(function() {
        var finalWidth = parseInt($(this).attr("aria-valuenow"));
        $(this).css("width", "0px").animate({width: finalWidth+"%"}, 1500);
    });
});

Answer 2

我们可以按value

定位每个.progress-bar

代码：

eq()

我们将宽度设置为百分比。

在html代码中删除$(function () { var prog = $(".progress-bar"); prog.eq(0).animate({width:"50%"}, 1500) prog.eq(1).animate({width:"70%"}, 1500) prog.eq(2).animate({width:"85%"}, 1500) });值，我们将其在css中设置为0，以便我们可以正确设置动画。

的CSS：

width

here是工作示例。

使用jquery为几个进度条设置动画

2 个答案: