多个具有不同值的元素的JS数据属性

Question

我编码显示进度条：

<span class="starsCount" data-length="64"></span>

<span class="starsCount" data-length="13"></span>

<span class="starsCount" data-length="33"></span>

并通过调用JS函数的方式使用Jquery UI Progressbar Widget分配条长：

$(function () {
    $(".starsCount").progressbar({
        value: $('.starsCount').data('length')
    });
});

现在，我遇到一个问题，即所有元素的条长与第一个data-length="64"相等。 任何帮助深表感谢。

代码段： http : //jsfiddle.net/hbLw34ec/

Answer 1

您需要遍历每个特定元素，并分别实例化它们上的progressbar 。 这使您可以使用this关键字访问集合中每个元素的data属性。 尝试这个：

$(".starsCount").each(function() {
    $(this).progressbar({
        value: $(this).data('length')
    });
});

小提琴的例子