I tried but I did not resolve problem about perfect jquery plugin named rateYo.

I prepared a sample on this page:

/

$(".rateYo").rateYo({
  onSet: function(rating, rateYoInstance) {
    $(this).next().val(rating);
  },
  rating: 0,
  starWidth: "20px",
  numStars: 5,
  fullStar: true
});

<script src=".1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/bower_ponents/jquery-rateyo/min/jquery.rateyo.min.css" />
<script src="/bower_ponents/jquery-rateyo/min/jquery.rateyo.min.js"></script>
<div class="rateYo" id="a1"></div>
<input type="text" id="t1">
<div class="rateYo" id="a2"></div>
<input type="text" id="t2">
<div class="rateYo" id="a3"></div>
<input type="text" id="t3">

I tried but I did not resolve problem about perfect jquery plugin named rateYo.

I prepared a sample on this page:

http://jsfiddle/a1oewfwn/

$(".rateYo").rateYo({
  onSet: function(rating, rateYoInstance) {
    $(this).next().val(rating);
  },
  rating: 0,
  starWidth: "20px",
  numStars: 5,
  fullStar: true
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rateyo.fundoocode.ninja/bower_ponents/jquery-rateyo/min/jquery.rateyo.min.css" />
<script src="http://rateyo.fundoocode.ninja/bower_ponents/jquery-rateyo/min/jquery.rateyo.min.js"></script>
<div class="rateYo" id="a1"></div>
<input type="text" id="t1">
<div class="rateYo" id="a2"></div>
<input type="text" id="t2">
<div class="rateYo" id="a3"></div>
<input type="text" id="t3">

If you click on any star, let's say you click on 3rd star in row 2, it fixes all three rows to 3rd star while you move your mouse over from the first to fifth.

I want achieve, that all three rows are fixed to the last selection.

How can I solve this?

• javascript
• jquery
• rate

• 1 This is a bug, i shall try to fix this by next release - Thanks for pointing it out. – Prashanth Pamidi Commented May 29, 2015 at 12:09

2 Answers 2

Setting the plugin individually seems to work

$(".rateYo").each(function (e) {
    $(this).rateYo({
        onSet: function (rating, rateYoInstance) {
            $(this).next().val(rating);
        },
        rating: 0,
        starWidth: "20px",
        numStars: 5,
        fullStar: true
    });
});

$(".rateYo").each(function(e) {
      $(this).rateYo({
        onSet: function(rating, rateYoInstance) {
          $(this).next().val(rating);
        },
        rating: 0,
        starWidth: "20px",
        numStars: 5,
        fullStar: true
      });
    });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rateyo.fundoocode.ninja/bower_ponents/jquery-rateyo/min/jquery.rateyo.min.css" />
<script src="http://rateyo.fundoocode.ninja/bower_ponents/jquery-rateyo/min/jquery.rateyo.min.js"></script>
<div class="rateYo" id="a1"></div>
<input type="text" id="t1">
<div class="rateYo" id="a2"></div>
<input type="text" id="t2">
<div class="rateYo" id="a3"></div>
<input type="text" id="t3">

Use the attribute. readOnly: true