如何更新jQuery UI的进度条

Question

我有下面的代码片段：

<div class="progress" data-value="10" data-show-value="true"></div> 

这是一个进度条”我试图刷新显示后台进程的进展情况。

代码活生生的例子可以在这里找到：http://themes.vivantdesigns.com/vpanel/demo/styles

我想更新“数据值”属性;我正在使用：

<script> 
$(".progress").everyTime(1000,function(i) { 
    var val = $(this).attr('data-value'); 
    val = val + 20; 
    $(this).attr('data-value', val); 
}); 
</script> 

“val”是10，但它不会更改属性。任何想法为什么？

Answer 1

尝试这样：

<script type="text/javascript"> 
$(".progress").everyTime("1s", function(i) { 
    $(this).attr('data-value', parseInt($(this).attr('data-value'), 10) + 20); 
});  
</script> 

编辑

如果你希望创建一个进度条，你可以检查出jQuery Progressbar：

$("#progressbar").progressbar({ value: (STORED_DATA/TOTAL_DATA) }); 

编辑

如果你希望显示HTML5一个进度条，它可能是简单的只使用Progress标签：

$("#progressBar").everyTime("1s", function(i){ 
    $(this).attr("value", parseInt($(this).attr("value"), 10) + 10); 
}); 

<progress id="progressBar" max="100" value="0" />