Question

情景：

基本上，我有一个系统能够让用户对不同的产品进行评级（使用Laravel），我得到一个数字，一个平均数然后填充星星。评级显示在＆＃34;产品列表＆＃34;页面，因此该页面上将有多个产品。

我想做什么：

我希望能够通过div填充变量，该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

JQuery / Font Awesome - 星级默认值

1 个答案: