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

Question

我的代码显示了进度条:

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

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

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

并使用 Jquery UI Progressbar Widget 指定条形长度通过调用JS函数的方式:

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

现在，我遇到一个问题，所有元素的条形长度都与第一个元素相等 数据长度=“64”。非常感谢任何帮助。

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

Answer 1

您需要循环遍历每个特定元素并分别实例化它们上的进度条。这允许您使用 this 关键字访问集合中每个元素的 data 属性。试试这个:

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

Example fiddle