文章/答案/技术大牛

发布

社区首页 >问答首页 >如何简化这个css星级评分？

问如何简化这个css星级评分？
EN

Stack Overflow用户

提问于 2021-05-05 01:38:32

回答 2查看 82关注 0票数 0

我试图简化这个星级评分，这是在我的项目的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

回答 2

Stack Overflow用户

发布于 2021-05-05 01:48:08

您可以使用计算出的选中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>}

票数 0

Stack Overflow用户

发布于 2021-05-05 01:58:42

您可以创建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>`
}

<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" />

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67389584

复制

相似问题

问如何简化这个css星级评分？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何简化这个css星级评分？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何简化这个css星级评分？
EN