javascript - 使用 jquery 动画几个进度条

Question

我尝试编写 js 以根据它们的宽度为多个 Bootstrap 进度条设置动画。我编写了简单的代码，但它不起作用，可能是因为它采用了带有类进度条的第一个 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

但是我对它不太满意，导致它在bening时有点卡住。不够流畅。你有什么建议吗？

$(".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 应该是 now 的值):

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