多個具有不同值的元素的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')
    });
});

小提琴的例子