JQuery/Font Awesome - 星级默认值

Question

场景:

基本上，我有一个系统，可以让用户对不同的产品进行评分(使用 Laravel)，然后我会得到一个数字，即平均值，然后填充星星。评级显示在“产品列表”页面上，因此该页面上将有多个产品。

我想做的事:

我希望能够通过 div 传递一个变量，该变量在页面加载时填充星星。我尝试过以下方法:

<span class="rating" rating="3">
  <span class="star "></span>
  <span class="star "></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</span>

jQuery:

$('.rating').each(function (event) {

  var rating = $(this).attr('rating');

  for(var i = 0; (i < rating); i++)
  {
        $('.rating span.star').eq(i).addClass('filled');
  }

});

但问题是恒星分布在错误的区域。而且，当有另一种产品时，它只采用最后一个产品及其星级，而忽略其余产品。

一个实例:

http://jsfiddle.net/qes0tgrt/

Answer 1

为了使星星朝正确的方向移动，您需要将 . rating 类更改为:

.rating {
       unicode-bidi:bidi-override;
       direction:ltr;
       font-size:30px;
}

添加这些类以获得半星:

span.star.half-filled:before{
    content: "\f089";
    color:#e3cf7a;
}
span.star.half-filled:after{
    content: "\f006";
    color:#e3cf7a;
    margin-left:-20px;
}

脚本看起来像这样:

$('.rating').each(function (event) {
   var rating = $(this).attr('rating');
   for(var i = 0; (i < rating); i++)
   {
      $(this).find('span.star').eq(i).addClass('filled');
   }
   //if rating has decimal places means its a half star
   if(rating % 1 > 0)
      $(this).find('span.star').eq(i - 1).addClass('half-filled');
});

最后对于半星使用评级属性，如下所示:

<span class="rating" rating="2.5">

更新了工作示例:fiddle