如何简化这个 CSS 星级评分？答案

【问题标题】：How to simplify this css star rating?如何简化这个 CSS 星级评分？
【发布时间】：2021-07-27 02:01:26
【问题描述】：

我正在尝试简单地在我的项目的 cshtml 页面中给出这个星级。我不想在我的视图中包含所有这些代码。它采用视图模型的分数值并决定显示多少已选中的星星。有谁知道如何使它变得更好？

 @if (Model.Score>= 100)
                {
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                }
                else if(Model.Score>= 80)
                {
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star"></span>
                }
                else if(Model.Score>=60)
                {
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                }
                else if(Model.Score>=40)
                {
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                }
                 else if(Model.Score>=20)
                {
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                }
                 else if(Model.Score<20 && Model.Score>=0)
                {
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                    <span class="fa fa-star"></span>
                }

【问题讨论】：

标签： javascript css asp.net-mvc razor

【解决方案1】：

您可以使用计算的启动次数进行循环，检查 n 和未检查 (5 - n)

@{n = Math.Floor(Math.Min(1, Model.Score/100) * 5)}

@for(var i = 0; i <= n; i++)
    {<span class="fa fa-star checked"></span>}

@for(var i = 0; i <= 5 - n); i++)
    {<span class="fa fa-star" span>}

或者更好的是找出同一循环中的 checked 类

@for(var i = 0; i <= 5; i++)
    {<span class="fa fa-star @(@Model.Score <= i * 5 ? 'checked' : '')"></span>}

【讨论】：

您好，这看起来不错，但是我的 cshtml 文件中无法识别 Math.min 和 floor
我认为是因为它们需要大写（在 js 中点头小写）。但无论如何，第二种选择可能更好

【解决方案2】：

您可以创建score/20 选中的星星，其余的将是未选中的星星。

const score = 60;
const checkedStars = Math.floor(score / 20);
const uncheckedStars = 5 - checkedStars;

for (let i = 0; i < checkedStars; i++) {
  document.body.innerHTML += `<i class="fa fa-star checked"></i>`
}

for (let i = 0; i < uncheckedStars; i++) {
  document.body.innerHTML += `<i class="far fa-star "></i>`
}

&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" /&gt;

【讨论】：

@culdaffe 请检查这是否解决了您的问题，如果您有任何问题，请告诉我。
你好，我是把这个放在我的cshtml页面还是我的站点js中？
这是在 JavaScript 中的，所以把其他 js 代码放在一边。请让我知道这是否有效，否则我将删除我的答案。 @culdaffe