[英]How to calculate and display ratings for font-awesome using jQuery
I am trying to display the stars and append the <i>
tag dynamically based on the count. 我试图显示星星并根据计数动态追加<i>
标签。
It's working fine, but the problem is if it has floating value then it displays the star in full, I need the star to be half (CSS class fa-star-half-o
). 它工作正常,但问题是如果它有浮动值然后它显示完整的星,我需要星是一半(CSS类fa-star-half-o
)。
This is what I tried: 这是我试过的:
var ratingValue = 3.489; for (var j = 0; j < ratingValue; j++) { $(".rating").append('<i class="fa fa-star" aria-hidden="true"></i>'); }
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> <div class="rating"> </div>
You can achieve what you want like below, 你可以在下面实现你想要的,
var ratingValue = 3.489, rounded = (ratingValue | 0);
var decimal = ratingValue - rounded, $rating = $(".rating");
for (var j = 0; j < rounded ; j++) {
$rating.append('<i class="fa fa-star" aria-hidden="true"></i>');
}
if(decimal) {
$rating.append('<i class="fa fa-star-half" aria-hidden="true"></i>');
}
Edit as per your new requirement, 根据您的新要求进行编辑,
var ratingValue = 3.9, rounded = (ratingValue | 0);
for (var j = 0; j < 5 ; j++) {
$(".rating").append(
'<i class="fa '+ ((j < rounded)
? "fa-star"
: ((((ratingValue - j) > 0) && ((ratingValue - j) < 1))
? "fa-star-half-o"
: "fa-star-o"))
+'" aria-hidden="true"></i>');
}
And to make the code more readable, we can do like this, 为了使代码更具可读性,我们可以这样做,
var ratingValue = 1.9,
rounded = (ratingValue | 0),
str;
for (var j = 0; j < 5; j++) {
str = '<i class="fa ';
if (j < rounded) {
str += "fa-star";
} else if ((ratingValue - j) > 0 && (ratingValue - j) < 1) {
str += "fa-star-half-o";
} else {
str += "fa-star-o";
}
str += '" aria-hidden="true"></i>';
$(".rating").append(str);
}
try using some math 尝试使用一些数学
var ratingValue = 3.489;
var roundedValue = Math.trunc(ratingValue);
for (var j = 0; j < roundedValue; j++) {
$(".rating").append('<i class="fa fa-star" aria-hidden="true"></i>');
}
var k = 0;
if (ratingValue -roundedValue > 0.4 && ratingValue -roundedValue < 1) {
k = 1;
$(".rating").append('<i class="fa fa-star-half-o" aria-hidden="true"></i>');
}
for (var i = Math.trunc(ratingValue)+k; i < 5; i++) {
$(".rating").append('<i class="fa fa-star-o" aria-hidden="true"></i>');
}
https://jsfiddle.net/8vmbc1a7/4/ https://jsfiddle.net/8vmbc1a7/4/
If j <= ratingValue
add a full star, else if j < ratingValue + 1
add a half-star, else add an empty star. 如果j <= ratingValue
添加一个完整的星,否则如果j < ratingValue + 1
添加一个半星,否则添加一个空星。
var ratingValue = 3.489; for (var j = 1; j <= 5; j++) { $(".rating").append('<i class="fa fa-star' + ((j <= ratingValue) ? '' : ((j < ratingValue + 1) ? '-half-o' : '-o')) + '" aria-hidden="true"></i>'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" /> <div class="rating"> </div>
updated your fiddle: https://jsfiddle.net/32L669tv/2/
take a look. 更新你的小提琴: https://jsfiddle.net/32L669tv/2/
: https://jsfiddle.net/32L669tv/2/
看一看。
The code: 代码:
var ratingValue = 3.489;
var intRatingVal = parseInt(ratingValue);
for(var j=0; j < intRatingVal; j++){
$(".rating").append( '<i class="fa fa-star" aria-hidden="true"></i>' );
}
if ((ratingValue - intRatingVal) > 0) {
$(".rating").append( '<i class="fa fa-star-half-o" aria-hidden="true"></i>' );
}
The basic thing is -- if there are floating number in rating -- you don't need a single loop to show half star. 基本的是 - 如果评级中有浮动数字 - 你不需要一个循环来显示半星。 just show full star based on full part and then half based on if there are any floats. 只显示基于完整部分的全明星,然后根据是否有任何浮点数显示一半。
You can round down the value and calculate the difference between the rounded value and the actual rating value: var dif = ratingValue - roundValue
您可以向下舍入该值并计算舍入值和实际评级值之间的差值: var dif = ratingValue - roundValue
dif > 0.5
display a full star 如果dif > 0.5
显示满星 0.5 > dif > 0.1
display a half star 如果0.5 > dif > 0.1
显示半星 if dif < 0.1
no additional stars displayed 如果dif < 0.1
则不显示其他星星
var ratingValue = 3.489; var floorVal = Math.floor(ratingValue); for(var j=0; j<floorVal; j++){ $(".rating").append( '<i class="fa fa-star" aria-hidden="true"></i>' ); } var dif = ratingValue - floorVal; if(dif > 0.5) { $(".rating").append( '<i class="fa fa-star" aria-hidden="true"></i>' ) } else if(dif > 0.1) { $(".rating").append( '<i class="fa fa-star-half-o" aria-hidden="true"></i>' ); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.