如何更新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" />