如何使用rater js在Jquery每个函数中显示用户率

Question

我正在使用raterJs 在 Jquery 中对用户进行评分和显示率。 这是我正在尝试 jquery

$.ajax({

    type: "POST",
    url: api_url,
    data: data,
    dataType: "json",
    success: function(data) {

        var userlist = data.response;
            var markup = '';
            $.each(userlist, function(key, value) {
                var options = {
                    max_value: 5,
                    step_size: 0.5,
                    initial_value: value.rating,
                }
                markup += '<li id="' + value.user_id + '" class="collection-item user_rating avatar">' +
                    '<img src="' + api_url + 'backend/web/uploads/' + value.image + '" alt="userimage" class="circle"></img>' +
                    '<span class="title">' + value.name + '</span><br>' + '<div class="rating"></div>' +
                    '<a id="' + value.user_id + '" data-val="' + value.user_id + '" class="book_button book_button_id waves-effect waves-light btn-small secondary-content" value="' + value.user_id + '">Book Now</a>' +
                    '</li>';
                $(".rating").rate(options);
            });
            $('#user_list').append(markup);

           
    }
});

ajax 响应

"response":[{"user_id":"717","skill_id":"34","name":"ddgfgd","image":null,"content":"good","rating":"5"},
{"user_id":"745","skill_id":"34","name":"gfgdd","image":null,"content":null,"rating":"5"},
{"user_id":"710","skill_id":"34","name":"kichuzzz","image":null,"content":"","rating":"4.5"},
{"user_id":"771","skill_id":"34","name":"neenu","image":null,"content":"neenu's updated review","rating":"3.5"},

html

 <ul class="collection list_skills" id="user_list">
 </ul>

这不起作用，甚至没有显示评分星，我得到了来自 here 的答复。 所以，我调用了 $(".rating").rate(); $('#user_list').append(markup); 之后它正在工作，但我不能将参数设置为速率函数作为变量选项，因为评级在 $each(function()) 中的 value.rating 中。 如何将评分传递给 rate() 函数 注意：- 响应是从服务器返回的 json_ecnoded 数组。

Answer 1

您首先需要将您的内容附加到ul 标记中，然后使用$("#user_list li:last .rating").rate({//your option}) 使用评分值初始化您的评分器插件。

演示代码：

var data = {
  "response": [{
      "user_id": "717",
      "skill_id": "34",
      "name": "ddgfgd",
      "image": null,
      "content": "good",
      "rating": "2.5"
    },
    {
      "user_id": "745",
      "skill_id": "34",
      "name": "gfgdd",
      "image": null,
      "content": null,
      "rating": "5"
    },
    {
      "user_id": "710",
      "skill_id": "34",
      "name": "kichuzzz",
      "image": null,
      "content": "",
      "rating": "4.5"
    },
    {
      "user_id": "771",
      "skill_id": "34",
      "name": "neenu",
      "image": null,
      "content": "neenu's updated review",
      "rating": "3.5"
    }
  ]
}

/*$.ajax({

    type: "POST",
    url: api_url,
    data: data,
    dataType: "json",
    success: function(data) {*/

var userlist = data.response;

$.each(userlist, function(key, value) {
  //append it 
  $('#user_list').append('<li id="' + value.user_id + '" class="collection-item user_rating avatar">' +
    '<img src="backend/web/uploads/' + value.image + '" alt="userimage" class="circle"></img>' +
    '<span class="title">' + value.name + '</span><br>' + '<div class="rating"></div>' +
    '<a id="' + value.user_id + '" data-val="' + value.user_id + '" class="book_button book_button_id waves-effect waves-light btn-small secondary-content" value="' + value.user_id + '">Book Now</a>' +
    '</li>');
  //then find last li appended -> rating intialize it
  $("#user_list li:last .rating").rate({
    max_value: 5,
    step_size: 0.5,
    initial_value: value.rating,
  });
});



/*}
});*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rater-jquery@1.0.0/rater.min.js"></script>
<ul class="collection list_skills" id="user_list">
</ul>