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

Question

我想显示星级的预设值，我已经使用了它，但没有任何反应。

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

Answer 1

你的问题是你在 ajax 完成调用之前调用了速率插件，所以它找不到任何 div 和 rateYo class,

你必须在 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

查看示例片段：

$(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>

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

show default star rating on rateYo jquery star plugin

javascript

html

jquery

rating

rateyo