javascript - 星级评定是让星星从后面填满

Question

我有这段代码基于默认值，它填充了星星。例如，如果数字是 3，它会填充我 3 颗星，但是 jquery 填充它的方式，它让我的前两颗星空着，它填充了其他三颗星。我有演示 here .另外，如果数字是小数，我该如何填充半星？

HTML代码:

<p class="rating" data-default-value="2">
 <!-- data-default-value="@rev.Rating" -->
 <span data-value="5" class="fa fa-star"></span>
 <span data-value="4" class="fa fa-star"></span>
 <span data-value="3" class="fa fa-star"></span>
 <span data-value="2" class="fa fa-star"></span>
 <span data-value="1" class="fa fa-star"></span>
</p>

和CSS:

.rated {
border: 1px solid red;
}

.half {
 border: 1px solid blue;
}

和 JQuery:

jQuery(function($) {
   $('.rating').each(function() {
   $(this).find('span').slice(-$(this).data('defaultvalue')
    ).addClass("rated");
   });
 })

Answer 1

不使用slice(我觉得更易读)

jQuery(function($) {
  var count = $('.rating').data('defaultValue');

  for(var i = 1; i <= count; i++)
  {
    $('.rating > span[data-value=' + i + ']').addClass("rated");
    }
 })

.rated {
border: 1px solid red;
}

.half {
 border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p class="rating" data-default-value="2">
 <!-- data-default-value="@rev.Rating" -->
 <span data-value="1" class="fa fa-star">1</span>
 <span data-value="2" class="fa fa-star">2</span>
 <span data-value="3" class="fa fa-star">3</span>
 <span data-value="4" class="fa fa-star">4</span>
 <span data-value="5" class="fa fa-star">5</span>
</p>

如果您真的想使用slice，您可以这样做:您需要将数组切片“介于 0 和 x 之间”。如果您使用单个参数调用，您将只获得切片数组的末尾部分。参见 the documentation有关 .slice() 方法的更多信息。

    jQuery(function($) {
      var count = $('.rating').data('defaultValue');

        $('.rating > span').slice(0, count).addClass("rated")
        
     })

    .rated {
    border: 1px solid red;
    }

    .half {
     border: 1px solid blue;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <p class="rating" data-default-value="2">
     <!-- data-default-value="@rev.Rating" -->
     <span data-value="1" class="fa fa-star">1</span>
     <span data-value="2" class="fa fa-star">2</span>
     <span data-value="3" class="fa fa-star">3</span>
     <span data-value="4" class="fa fa-star">4</span>
     <span data-value="5" class="fa fa-star">5</span>
    </p>