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

Posted 2023-02-19

【中文标题】在 rateYo jquery star 插件上显示默认星级

【英文标题】：show default star rating on rateYo jquery star plugin

【发布时间】：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 你能检查一下编辑后的代码吗

【参考方案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>