javascript - 使 CSS 星级评定动态化
问题描述
下面的代码笔项目由一个纯 CSS 星级评分界面组成。 https://codepen.io/yaworek/pen/JJpEaZ
下面是css部分:
/***
* Simple Pure CSS Star Rating Widget Bootstrap 4
*
* www.TheMastercut.co
*
***/
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/* Styling h1 and links
––––––––––––––––––––––––––––––––– */
h1[alt="Simple"] {color: white;}
a[href], a[href]:hover {color: grey; font-size: 0.5em; text-decoration: none}
.starrating > input {display: none;} /* Remove radio buttons */
.starrating > label:before {
content: "\f005"; /* Star */
margin: 2px;
font-size: 2em;
font-family: FontAwesome;
display: inline-block;
text-shadow: 0px 0px 3px #000;
}
.starrating > label
{
color: #FFFFFF; /* Start color when not clicked */
}
.starrating > input:checked ~ label
{ color: #ffca08 ; } /* Set yellow color when star checked */
.starrating > input:hover ~ label
{ color: #ffca08 ; } /* Set yellow color when star hover */
它使用单选按钮和 css 来显示评级。我想为此添加额外的评级集。我想添加更多评级集,例如 5 本书的 5 个评级集。现在的问题是,css 实现会重置一组的选定评级,同时选择另一组的评级。
下面是我添加的附加评级集的代码笔链接。问题是当我为第二组选择评级时,第一组的评级被删除。 https://codepen.io/brainyprb/pen/BvoqLE
仅使用 css 可以解决吗?还是我必须为此使用javascript/jquery?
解决方案
为每组星星使用不同的名称,如下面的 img 所示。
<input type="radio" id="star5" name="rating1" value="5" /><label for="star5" title="5 star">5</label>
<input type="radio" id="star4" name="rating1" value="4" /><label for="star4" title="4 star">4</label>
.................
<input type="radio" id="stare" name="rating" value="5" /><label for="stare" title="5 star">5</label>
<input type="radio" id="stard" name="rating" value="4" /><label for="stard" title="4 star">4</label>
......................
推荐阅读
- python - 查找加密资产 robin_stocks 的功能
- java - 将 getText() 与 LocalDate Java 一起使用
- c++ - 我们是否需要在类的构造函数的开头清除向量类型的类成员?
- python - 循环文件并执行相同的操作
- spring - Spring Task Executor 线程数不断增加
- python - 我在 Python 中使用 EmailMessage 练习电子邮件
- r - 编程一个函数来显示飞镖游戏中可能的完成
- sql - 在 oracle sql 中使用 regexp_replace 标准化地址
- javascript - 错误:使用 toFixed() 无法将类型“字符串”分配给类型“数字”
- java - 如何在java中按字母顺序对列表进行排序?