如何使用 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') 但它似乎行不通

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

Answer 1

你必须使用这个：

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

Answer 2

你也可以用这个：

$(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 3

因为有不止一个元素具有 class "star-rating" 所以你需要遍历元素并且 forEach 循环将使当前迭代元素进入循环，这样你就可以使用该元素.并应用 JRate。

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

Answer 4

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

如果只有一个元素具有 class

，您可以使用选择器

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

对于多个元素：

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

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

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

Answer 5

$(this).data('star-rating') 如果你从一个函数 return 它会起作用。

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

如何使用 jQuery 访问数据属性

How to access data attribute using jQuery

javascript

jquery

custom-data-attribute