Question

我试过，但我没有解决有关名为rateYo的完美jquery插件的问题。

我在这个页面上准备了一个样本：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.css" />
<script src="http://rateyo.fundoocode.ninja/bower_components/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">

如果你点击任何一颗星，让我们说你点击第2行中的第3颗星，它将所有三行固定为第3颗星，同时将鼠标从第一颗移到第五颗。

我想要实现，所有三行都固定在最后一个选择上。

我该如何解决这个问题？

Answer 1

使用该属性。 readOnly：true

Answer 2

单独设置插件似乎有效

$(".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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rateyo.fundoocode.ninja/bower_components/jquery-rateyo/min/jquery.rateyo.min.css" />
<script src="http://rateyo.fundoocode.ninja/bower_components/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">

评级星级点击后继续评级的jQuery rateYo插件？

2 个答案: