Question

如何使用带有数据属性的 Rate Yo jQuery星级评分插件？
有没有办法通过HTML属性设置默认初始值？
是否可以使用data-rateyo-score传递score值。

例如，如果我想根据动态值开始分数，我该如何使用回调？

我的代码如下：
<div class="rateYo" data-rateyo-score="1"></div>

我尝试下面的代码：

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

和此：

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

但似乎有些不对劲。

Answer 1

使用“data-rateyo-rating ='1'”代替“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>

Answer 2

设置readOnly选项为true时的默认评级值

如何使用具有数据属性的Rate Yo jQuery星级评分插件？

2 个答案: