如何根据评级值给p的星星上色:评级

Question

我正在尝试根据值为PrimeFaces评级组件的星星上色。如果值为1，则星形应为红色，如果值为5，则星形应该为绿色。

Answer 1

简单的方法是根据评级值添加一个类，并在值更改时更新：

<p:rating ... styleClass="stars-#{bean.ratingValue}">
<p:ajax update="@this"/>
</p:rating>

有了这个类，你可以根据设置的类来设计星星的样式：

body .ui-rating.stars-1 .ui-rating-star-on a {
color: red;
}
body .ui-rating.stars-2 .ui-rating-star-on a {
color: orange;
}
body .ui-rating.stars-3 .ui-rating-star-on a {
color: yellow;
}
body .ui-rating.stars-4 .ui-rating-star-on a {
color: greenyellow;
}
body .ui-rating.stars-5 .ui-rating-star-on a {
color: green;
}

另请参阅：

• 如何用自定义样式覆盖默认的PrimeFaces CSS