如何使用jQuery访问属性数据

I'm struggling with what is probably a very simple bit of jQuery

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

I have html like this:

我有这样的html:

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

I have some javascript which needs to do something based on the star rating of each of these elements and currently looks like this:

我有一些javascript需要根据这些元素的星级评级来做一些事情，现在看起来是这样的:

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

I want to replace <value of data-star-rating> with the value of the data attribute relating to the element currently being processed

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

I thought this would work $(this).data('starRating') but it doesn't seem to

我原以为这个可以用$(这个).data(‘starRating’)，但好像不行

How can I access the value of the data attribute in this situation?

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

5 个解决方案

#1

$(this) doesn't refer to the element on which the jRate function is being called.

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

You can use the selector if there is only a single element having that class

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

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

For multiple elements:

多个元素:

Iterate over all the elements having the class star-rating and attach the plugin jRate individually with the rating value of the respective element.

遍历具有类星级评级的所有元素，并分别将插件jRate与相应元素的评级值附加在一起。

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

JSFiddle Demo^{Didn't find CDN link of that plugin, so added the minified code in JavaScript pane itself}

JSFiddle demodemo没有找到那个插件的CDN链接，所以在JavaScript窗格中添加了缩小的代码

#2

You can use this too :

你也可以用这个:

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

EDIT

编辑

After reading again the question. Comments are right, you should iterate through .star-rating array to apply the jRate to each element, sorry for my misunderstanding.

再读一遍问题。注释是对的，您应该遍历.star-rating数组来对每个元素应用jRate，对不起，我理解错了。

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

#3

As there are more than one elements having class "star-rating" so you will need to loop through the elemets and forEach loop will make current iterating element accessible into the loop so you can use that element. And apply the JRate.

因为有不止一个元素具有“星级评级”，所以您需要循环元素，forEach循环将使当前迭代元素可访问到循环中，以便您可以使用该元素。并应用JRate。

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

#4

You must use this:

你必须用这个:

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

#5

$(this).data('star-rating') will work if you return it from a function.

如果您从函数返回数据，那么$(this).data('star-rating')将会正常工作。

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

#1