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的所有元素，并使用相应元素的jRate值单独附加插件rating。

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

JSFiddle Demo ^{未找到该插件的CDN链接，因此在JavaScript窗格中添加了缩小的代码}

Answer 3

由于有多个元素具有等级＆＃34;星级＆＃34;所以你需要循环遍历elemets和forEach循环将使当前的迭代元素可以进入循环，这样你就可以使用该元素了。并应用JRate。

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

Answer 4

你必须使用它：

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

Answer 5

如果从函数返回，

$(this).data('star-rating')将起作用。

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

如何使用jQuery访问数据属性

5 个答案: