jQuery 更改进度条 "aria-valuenow" 属性和 CSS "width" 属性 的值

Question

我的页面 (Bootstrap) 上有一个进度条，如下所示：

<div id="theprogressbar" class="progress-bar progress-bar-u" 
     role="progressbar" aria-valuenow="75%" aria-valuemin="0" 
     aria-valuemax="100" style="width: 75%">

我想通过 jQuery 更新它，我已经完成了大部分工作并计算了我需要放入其中的新值，但不确定如何定位 aria-valuenow 和 style="width: " 值。

假设我的 jQuery 给我新的 value+% 作为一个名为 newprogress 的变量：

$('#theprogressbar'). *(please help me finish this line)* (newprogress)

Answer 1

您可以将此元素的属性应用为：

$('#theprogressbar').attr('aria-valuenow',value+'%');   

and 

$('#theprogressbar').attr('width',value+'%');

如果值在变量中。

$('#theprogressbar').attr('aria-valuenow',newprogressvalue);   

Answer 2

$('#theprogressbar').attr('aria-valuenow', newprogress).css('width', newprogress);

如果你想按照下面的代码设置 %，默认值是 px

$('#theprogressbar').attr('aria-valuenow', newprogress).css('width', newprogress+'%');

Answer 3

要设置宽度，请使用 jQuery 的 width() 方法。

要访问 aria-valuenow，请使用 attr()。

两者结合：

$('#id').width(newprogress).attr('aria-valuenow', newprogress);

Answer 4

你可以使用

$('#theprogressbar').attr("aria-valuenow","the new value"); 
$('#theprogressbar').attr("style","width:"+theincrementingvalue); 

或者您可以在 jquery http://api.jquery.com/css/

中使用 .css

Answer 5

这个效果更好：

var newprogress=80;
$('#id').width(newprogress + "%").attr('aria-valuenow', newprogress);