使用jQuery与HTML5进度条

Question

我想使用jQuery更新我正在使用的进度条的值。

<progress id="progBar" value="10" max="100">

每当有人按下按钮将值增加1时，我希望更新该值，但是我不知道如何编写代码。

我尝试使用val（15）.progressbar（{value：15}），但它无法更新到15。

有人能给我一个解决方案吗？

- Devyn

---

.progressbar('value', 15);怎么样？ - Rob

我尝试了，但还是不行。 :/ - Devyn

Answer 1

演示 - http://jsfiddle.net/fJxGG/1/

两者在Chrome和Firefox上都似乎有效 -

$('#progBar').attr('value',50);
$('#progBar').val(70);

- Jayendra

Answer 2

$('#click').click(function() {
  // Get progress bar current value and add with 1;
  var curr_val = $('#progBar').val();
  var new_val = Number(curr_val) + 1;
  $('#progBar').val(new_val);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="click">Click me</button>
<progress id="progBar" value="10" max="100">

- Nadeem Shinwari

---

请解释你的解决方案。请勿仅输入代码。 - Jens

Answer 3

你尝试过 $("#progBar").attr("value", 15); 吗？

- alediaferia

---

是的，它可以工作。我的后端有一个缺陷，使其保持相同的值。 - Devyn

请注意，自 jQuery 1.8 版本起，此方法已被弃用：https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryattrfn-is-deprecated。请改用 $('#progBar').val(70);。 - Paul