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