在 rateYo jquery star 插件上显示默认星级答案

【问题标题】：show default star rating on rateYo jquery star plugin在 rateYo jquery star 插件上显示默认星级
【发布时间】：2021-04-01 20:42:13
【问题描述】：

我想显示星级的预设值，我已经使用了这个值，但什么也没发生。

<div class='rateYo' data-rateyo-rating='3' data-rateyo-score='4'></div>
<span class='score'>0</span>
<span class='result'>0</span>

$(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);
   });
});

我有一个成功后的 ajax 调用

$.each(arr, function(idx, obj) {
    PAmount = parseFloat(obj['price']) * parseFloat(obj['qty']);
    docc = "<div class='col-md-3'>"+obj['name']+"</div><div class='col-md-2'>"+obj['price']+"</div><div class='col-md-2'>"+obj['qty']+"</div><div class='col-md-2'>"+PAmount.toFixed(2)+"</div><div class='col-md-3 rateYo' data-rateyo-rating='3' data-rateyo-score='4'></div><div class='col-md-12'><br></div>"; 

    $('#productDataDetails'+b).append(docc);
});

【问题讨论】：

你试过了吗？ $("#rateYo").rateYo({rating: 3.6});
@AbhishekPandey 实际上我正在使用 for 循环并显示每个产品的评分
这只是一个拼写错误，大写'Y'字试试$(".rateYo")而不是$(".rateyo")
@SadhilSpring 没有仍然无法正常工作
@SadhilSpring 你能检查一下编辑后的代码吗

标签： javascript html jquery rating rateyo

【解决方案1】：

你的问题是你在 ajax 完成调用之前调用了 rate 插件，所以它不会找到任何带有 rateYo 类的 div，

您必须在将 ajax 结果添加到 dom 之后（毕竟 append ）最后调用它，如下所示：

我有一个成功后的 ajax 调用

//ajax call function {

$.each(arr, function(idx, obj) {
   PAmount = parseFloat(obj['price']) * parseFloat(obj['qty']);
   docc = "<div class='col-md-3'>"+obj['name']+"</div><div class='col-md-2'>"+obj['price']+"</div><div class='col-md-2'>"+obj['qty']+"</div><div class='col-md-2'>"+PAmount.toFixed(2)+"</div><div class='col-md-3 rateYo' data-rateyo-rating='3' data-rateyo-score='4'></div><div class='col-md-12'><br></div>"; 


    $('#productDataDetails'+b).append(docc);
    
});

$(".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);
   
}); 

// } end ajax call

参见示例 sn-p ：

$(function() {
  $("#add").on("click", function() {
    docc = "<div><div class='rateYo' data-rateyo-rating='3' data-rateyo-score='1'></div><div class='col-md-12'><br><span class='score'>0</span> <span class='result'>0</span></div></div>";
    console.log("eee");
    $('#productDataDetails').append(docc);
    $(".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);
    });
  });


  $(".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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<div id="productDataDetails">
  <div>
    <div class='rateYo' data-rateyo-rating='3' data-rateyo-score='4'></div>
    <span class='score'>0</span> 
    <span class='result'>0</span>
  </div>
</div>

<br><br>
<button id="add">add</button>

【讨论】：