如何使用jQuery計算和顯示font-awesome的評級

Question

我試圖顯示星星並根據計數動態追加<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> 

Answer 1

你可以在下面實現你想要的，

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

DEMO

根據您的新要求進行編輯，

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

DEMO

為了使代碼更具可讀性，我們可以這樣做，

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

DEMO

Answer 2

嘗試使用一些數學

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/

Answer 3

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

Answer 4

更新你的小提琴： https://jsfiddle.net/32L669tv/2/ ： 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>' );
}

基本的是 - 如果評級中有浮動數字 - 你不需要一個循環來顯示半星。 只顯示基於完整部分的全明星，然后根據是否有任何浮點數顯示一半。

Answer 5

您可以向下舍入該值並計算舍入值和實際評級值之間的差值： 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>' ); } 

小提琴