如何使用jQuery访问数据属性

Question

我正在努力解决可能是一个非常简单的jQuery

我有这样的HTML:

<div class="star-rating" data-star-rating="5.0"></div>
<div class="star-rating" data-star-rating="2.0"></div>

我有一些javascript,需要根据每个元素的星级评分做一些事情,目前看起来像这样:

$('.star-rating').jRate({
    startColor : '#ccc',
    endColor : '#ccc',
    readOnly : true,
    rating : <value of data-star-rating>
});

我想替换<value of data-star-rating>与当前正在处理的元素相关的数据属性的值

我认为这会起作用,$(this).data('starRating')但似乎没有

在这种情况下如何访问data属性的值？

Answer 1

您也可以使用它:

$(this).data('star-rating');

编辑

再看完这个问题.注释是对的,您应该遍历.star-rating数组以将jRate应用于每个元素,对不起我的误解.

$('.star-rating').each(function () {       
    $(this).jRate({
        startColor: '#ccc',
        endColor: '#ccc',
        readOnly: true,
        rating: $(this).data('star-rating')
    });
});

Answer 2

$(this)jRate不引用正在调用该函数的元素。

如果只有一个元素具有该类，则可以使用选择器

$('.star-rating').jRate({
    startColor : '#ccc',
    endColor : '#ccc',
    readOnly : true,
    rating : $('.star-rating').data('star-rating')
});

对于多个元素：

迭代具有该类的所有元素，并使用相应元素的值单独star-rating附加插件。jRaterating

$('.star-rating').each(function () {
    $(this).jRate({
        startColor: '#ccc',
        endColor: '#ccc',
        readOnly: true,
        rating: $(this).data('star-rating')
    });
});

JSFiddle 演示^{没有找到该插件的 CDN 链接，因此在 JavaScript 窗格本身中添加了精简代码}