4

How can I use Rate Yo jQuery star rating plugin with data attribute?
Is there any way to set a default initial value via HTML attribute?
Is it possible using data-rateyo-score to pass the score value.

For example, If I want to start my score depending on a dynamic value, How can I use callback for it?

My code is same as below:
<div class="rateYo" data-rateyo-score="1"></div>

I try below code:

$('.rateYo').rateYo({
  score: function() {
    return $(this).attr('data-rateyo-score');
  }
});

and this:

$('.rateYo').rateYo({
  score: $(this).attr('data-rateyo-score');
  }
});

But it seems that something is wrong.

Mojtaba Reyhani
  • 447
  • 1
  • 6
  • 19

2 Answers2

5

Use "data-rateyo-rating='1'" instead "data-rateyo-score='1'"

$(function () {
  $(".rateyo").rateYo().on("rateyo.change", function (e, data) {
    var rating = data.rating;
    $(this).parent().find('.score').text('score :'+ $(this).attr('data-rateyo-score'));
    $(this).parent().find('.result').text('rating :'+ rating);
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<div>
    <div class="rateyo"
         data-rateyo-rating="1"
         data-rateyo-num-stars="5"
         data-rateyo-score="4"></div>
         <span class='score'>0</span>
         <span class='result'>0</span>
</div>
<hr>
<div>
    <div class="rateyo"
         data-rateyo-rating="2.4"
         data-rateyo-num-stars="5"
         data-rateyo-score="1"></div>
         <span class='score'>0</span>
         <span class='result'>0</span>
</div>
<hr>
<div>
    <div class="rateyo"
         data-rateyo-rating="4"
         data-rateyo-num-stars="5"
         data-rateyo-score="3"></div>
         <span class='score'>0</span>
         <span class='result'>0</span>
</div>
Farhad Bagherlo
  • 6,725
  • 3
  • 25
  • 47
  • Thanks for your help and reply, I have several rate element in a page and I want to set `rateYo` to the different value for each of them, but when I set it on one, it's configured for all elements of a certain class (for example, if rating is 1 for the first element, it will be 1 for all elements). – Mojtaba Reyhani Aug 06 '17 at 01:39
  • I changed the of the code. I think came close to your idea . Now each part is independent of other parts. Good luck – Farhad Bagherlo Aug 06 '17 at 04:08
  • Its value of 'data-rateyo-score' is also available like your sample – Farhad Bagherlo Aug 06 '17 at 04:19
1

Set default rating value when readOnly option: true