Question

我想显示多个星级评分。我在jQuery循环中获取正确的评级值时遇到问题。

我的HTML看起来像这样：

<select id="example{{$review->id}}" class="example" review-id="{{$review->id}}" data-rating="{{$review->rating}}">
           <option value=""></option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
</select>

我的jQuery：

  $(function() {
    $('.example').each(function(){
    var x = $('select').attr('data-rating');
    console.log(x);
    var review_id = $('select').attr('review-id');
    console.log(review_id);
  $('#example' +review_id).barrating({
    theme: 'fontawesome-stars',
    showSelectedRating: true,
    initialRating: x,
    readonly: true
  });
  });
});

示例数据：

第一个结果是5星评级和review_id = 1

第二个结果是4星评级和review_id = 2

在jQuery中，它正确循环2次，但x和review_id的结果都是5星评级，id为1。

如何解决这个问题，以便jquery-bar-rating星可以在两个结果上正确显示？

Answer 1

尝试将脚本更新为以下内容。

$(function() {
    $('.example').each(function() {
        var x = $(this).attr('data-rating');
        console.log(x);
        var review_id = $(this).attr('review-id');
        console.log(review_id);
        $('#example' +review_id).barrating({
            theme: 'fontawesome-stars',
            showSelectedRating: true,
            initialRating: x,
            readonly: true
        });
    });
});

在你的jQuery .each（）循环中，你应该引用$（this）来检索循环中活动元素的数据。

Answer 2

简易修复是针对课程而非ID。

示例：

脚本：

<script type="text/javascript">
   $(function() {
      $('.example').barrating({
        theme: 'fontawesome-stars',
        initialRating: $('.example').data('current-rating'),
      });
   });
</script>

HTML：

<select class="example">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<select class="example">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

在laravel 5中显示多个评级星级jquery bar评级

2 个答案: