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');
}
});
但问题是星星分布在错误的区域。而且,当有另一个产品时,它只采用最后一个产品及其星级评分而忽略其余部分。
一个活生生的例子:
为了在正确的方向上制作星星,您需要将 .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
场景:
基本上,我有一个系统可以让用户对不同的产品进行评分(使用 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');
}
});
但问题是星星分布在错误的区域。而且,当有另一个产品时,它只采用最后一个产品及其星级评分而忽略其余部分。
一个活生生的例子:
为了在正确的方向上制作星星,您需要将 .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