用半星填充 JavaScript 中的五星级系统答案

【问题标题】：Populating a five star system in JavaScript with half stars用半星填充 JavaScript 中的五星级系统
【发布时间】：2011-11-13 02:04:57
【问题描述】：

我试图弄清楚如何编写一个 javascript 函数，该函数接受一个元素 + 一个分数并使用 jQuery addClass 和 removeClass 显示正确的星级评分（四舍五入到最接近的半星）但有问题...当我使用“全星”系统时，我使用了这个系统：

function() {
    $(this).prevAll().andSelf().addClass('active');  
    $(this).nextAll().removeClass('active');
}

这不再适用于半星系统。有人有建议吗？这是我现在使用的代码：

function populateStars(stars, score) {
    // Stars refers to the <ul> container with <li> stars inside (see later code).
    // This function should use stars (container) and score (rating between 1-5) to display stars
}

这是“stars”变量所指的元素的示例：

<ul class="big-stars">
    <li class="star-1 full">1</li>
    <li class="star-2 full">2</li>
    <li class="star-3 half">3</li>
    <li class="star-4">4</li>
    <li class="star-5">5</li>
</ul>

以及控制星星是满、空还是半满的 CSS。

.big-stars li {
    text-indent: -9999px;
    width: 49px;
    height: 46px;
    background: url('../images/big_star_empty.png');
    }
.big-stars .full {
    background: url('../images/big_star_full.png'); 
    }
.big-stars .half {
    background: url('../images/big_star_half.png'); 
    }

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

function populateStars (stars, score)
{
    // Get the number of whole stars
    var iWholeStars = Math.floor(score);
    // Do we want a half star?
    var blnHalfStar = (iWholeStars < score);

    // Show the stars
    for (var iStar = 1; iStar <= iWholeStars; iStar++)
    {
        $('li.star-' + iStar, stars).addClass('full');
    }

    // And the half star
    if (blnHalfStar)
    {
        $('.star-' + iStar, stars).addClass('half');
    }
}

populateStars($('.big-stars'), 3.5)

显然，这可以通过将变量声明直接移动到它们被使用的地方来压缩。

编辑：JSFiddle 链接 :) http://jsfiddle.net/G8kwb/
编辑 2：JSFiddle 链接，四舍五入到最接近的半数：http://jsfiddle.net/G8kwb/8/

【讨论】：

嘿，乔，我实际上喜欢这种方法 - 我现在正在尝试寻找一种方法来四舍五入到最接近的 .5/整数（分数 var 变化很大）。

【解决方案2】：

这是另一种可能性，使用一些 jQuery lt 和 eq 选择器：

function populateStars (stars, score)
{
   //round to nearest half
   score = Math.round(score * 2) / 2;

   var scoreParts = score.toString().split('.');
   $(stars + ' li:lt('+ scoreParts[0]+')').addClass('full');

   if(scoreParts[1])
   {
       $(stars + ' li:eq('+ scoreParts[0] +')').addClass('half');
   }
}

populateStars('.big-stars', 3.5);

您需要将父类而不是实际对象传递给方法，但这对您来说是一个有趣的选择。

编辑：这是一个带有舍入的更新小提琴：jsFiddle，感谢 Joe 的初始版本！

另外，我在这个有趣的相关问题中找到了舍入逻辑 - Turn a number into star rating。

【讨论】：

这也是一个很好的选择 - 有一个问题：我们下拉的分数非常动态 - 所以“分数”变量可能是 3.22354 或 3.575 - 像你和乔这样的系统描述的很棒（而且很优雅），但它不会“四舍五入”到最近的星星 - 因此几乎总是会显示半颗星（平均降落在整数上的机会非常低）。有没有办法让它四舍五入到最接近的 0.5 或整数？
我使用了你的这个版本的代码：jsfiddle.net/JAhPK/18 来合并一个舍入方案......不确定它是否是最好的代码，但它可以工作！非常感谢 Zues 的帮助！
我已经更新了我的代码以包含一个舍入机制和一个相关问题，但看起来我太慢了！很高兴我能帮上忙 :) 在这里查看jsfiddle.net/JAhPK/19

【解决方案3】：

这是我想出的，它是否可以帮助任何人（使用 fontawesome 来代替星星，但可以替换样式元素：

function getRankStars(rank){

    // Round down to get whole stars:
    var wStars = Math.floor(rank);
    // Check if whole is less than rank.
    // If less than rank, a half star is needed:
    var halfStars = (wStars < rank);

    var output="";
    //Loop through five stars:
    for(let i=1;i<=5;i++){
      //Less than or equal to stars, display a solid star:
      if(i<=wStars){
        output+="</i><i class='fas fa-star' style='color:#fbcc05'></i>";

      //If interation is after a whole star and a half star is needed, display half star:
      }else if( i==wStars+1 && halfStars==true ){
        output+="<i class='fas fa-star-half-alt' style='color:#fbcc05'></i>";

      //Otherwise, display a gray empty star:
      }else{
        output+="<i class='far fa-star' style='color:#bfbfbf'></i>";
      }
    }
    return output;
  }

【讨论】：