在 Star Rating 中动态更改每个元素的颜色答案

【问题标题】：Change Color of every element dynamically in Star Rating在 Star Rating 中动态更改每个元素的颜色
【发布时间】：2019-01-02 09:01:57
【问题描述】：

我已经实施了星级评定，效果很好。现在的要求是为每个星星设置不同的颜色，其中我的星星颜色来自 CSS，其颜色为 GOLD。我怎样才能给它不同的颜色。例如 - 第一颗星应该是红色，第二颗蓝色，第三颗绿色等等..

<fieldset class="rating">
    <ng-container *ngFor="let star of starList">
        <input type="radio" id="th {{star.id}} {{j}}" name="th_{{j}}" (click)="updateRating(star.value,kpi.kpiId)" />
        <label [class]="star.class" for="th {{star.id}} {{j}}" [title]="star.value"></label>
    </ng-container>
</fieldset>

CSS：

.rating {
    border: none;
    float: left;
    direction: ltr;
}

.rating>input {
    display: none;
}

.rating>label:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    content: "\f005";
    font-weight: 900;
}

.rating>.half:before {
    content: "\f089";
    position: absolute;
}

.rating>label {
    color: #ddd;
    float: right;
}

.rating>input:checked~label,

/* show gold star when clicked */  

.rating:not(:checked)>label:hover,

/* hover current star */ 

.rating:not(:checked)>label:hover~label {
    color: gold;
    cursor: pointer;
}

【问题讨论】：

请将相应的代码添加到问题中，作为您所拥有的工作示例，这有助于 SO 社区更好地回答您的问题。 Minimal, Complete, and Verifiable example
使类名也像class1，class2，class3一样动态化..并为每个类赋予样式
我也更新了css。请先生看看。

标签： html css angular

【解决方案1】：

这是一个示例，您可以简单地为从 1 星到 5 星的每个阶段创建一个类

.rate-1 label:nth-child(1){
  background: red;  
}

.rate-2 label:nth-child(1) ,.rate-2 label:nth-child(2){
  background: orange;  
}

.rate-3 label:nth-child(1) ,.rate-3 label:nth-child(2) , .rate-3 label:nth-child(3){
  background: blue;  
}

.rate-4 label:nth-child(1) , .rate-4 label:nth-child(2) , .rate-4 label:nth-child(3) ,.rate-4 label:nth-child(4){
  background: yellow;  
}


.rate-5 label:nth-child(1) , .rate-5 label:nth-child(2) , .rate-5 label:nth-child(3) , .rate-5 label:nth-child(4) , .rate-5 label:nth-child(5){
  background: green;  
}

模板

<fieldset class="rating" [attr.class]="'rate-'+selectedValue">
    <ng-container *ngFor="let star of starList" >
        <label>
           <input type="radio" [value]="star" (click)="updateValue(star)"/> ★
        </label>
    </ng-container>
</fieldset>


{{selectedValue}}

stackblitz demo??

【讨论】：

这太棒了！你能帮我解决我刚刚在我的问题中更新的 css 吗？
你能创建一个你的代码@AniketKulkarni 的 stackblitz 演示库，以便我检查它吗？
别担心，我解决了。再次感谢您的帮助！ @malbarmawi

【解决方案2】：

检查下面的代码可能会对您有所帮助：

.yellow{
  color:yellow
}
.purple{
  color:purple
}
.blue{
  color:blue
}
.green{
  color:green
}

&lt;div [ngClass] = "noOfStars==1 ?'yellow':noOfStars==2?'purple':noOfStars==3?'blue':noOfStars==4?'green'"&gt;&lt;/div&gt;

【讨论】：