如何使用jQuery计算和显示font-awesome的评级

How to calculate and display ratings for font-awesome using jQuery

本文关键字：font-awesome 显示 何使用 jQuery 计算      更新时间：2023-09-26

我正在尝试显示星星并根据计数动态附加<i>标签。

它工作正常，但问题是如果它具有浮动值，那么它会完整显示星星，我需要星星是一半（CSS 类 fa-star-half-o）。

这是我尝试过的：

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>

你可以像下面这样实现你想要的，

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>');
}

演示

根据您的新要求进行编辑，

不需要 2 个不同的 for 循环（简单的数学就足够了）

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>');
}

演示

为了使代码更具可读性，我们可以这样做，

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);
}

演示

尝试使用一些数学

运算 
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/

如果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>

更新了你的小提琴：https://jsfiddle.net/32L669tv/2/看看。

代码：

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>' );
}

基本的事情是 - 如果评级中有浮点数 - 你不需要一个循环来显示半星。 只需根据完整部分显示全星，然后根据是否有任何浮点数显示半星。

您可以向下舍入该值并计算舍入值与实际评分值之间的差值：var dif = ratingValue - roundValue

  • 如果dif > 0.5显示全星
  • 如果0.5 > dif > 0.1显示半星

  • 如果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>' );
}

小提琴

相关文章：