从HTML元素内容设置jQuery UI Progress Bar

Question

我在jQuery UI插件中添加了一个进度条，我不想从这样的值控制它（默认设置）：

$("#progressBar").progressbar({
  value: 30.59
});

相反，我想直接从我的HTML控制它。我在HTML中有这段代码：

<span class="counter">30.59</span>
<div id="progressBar" ></div>

这个代码在我的JS中：

var counter = $(".counter");   
$("#progressBar").progressbar({
 value: counter
});

我做错了什么？

Answer 1

您需要获取.counter元素的text：

var counterValue = parseFloat($(".counter").text());
$("#progressBar").progressbar({ value: counterValue });

Answer 2

代码$(".counter")返回一个jQuery span对象，分配给进度条值对你没有用。

您需要的代码是：

var couterValue = parseFloat($(".counter").text());
$("#progressBar").progressbar({ value: counter });

另一件需要考虑的事情是 此代码运行时。

如果此代码仅在页面加载时执行一次，则进度条将仅显示span对象的初始值。

我无法想象这段代码对你有多大帮助，因为更新计数器span标签的任何内容都需要触发一个副本进入进度条，因此应该直接将值放在那里。

据我所知，你无法捕获不是表单控件的DOM对象上的文本更改事件。