JQuery / Font Awesome - 星级默认值

JQuery / Font Awesome - Star rating default value

场景:

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

我想做的事情:

我希望能够通过 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/

为了在正确的方向上制作星星,您需要将 .rating class 更改为:

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

为半星添加这些 classes :

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