Javascript 星级评定系统，给予独特的评级

我正在使用Star系统对数据库中的一些电影进行评分，我将这些电影添加到一个while循环中，并在每部电影中添加星星

我希望用户对每部电影给予唯一的评级，比如如果用户给一部电影五星评级，那么如果他试图再次给另一部电影五星评级，那么一定会有一些指示显示出来 在提交评级之前，将星星从黄色变为红色。有人能给我一些样品吗

。星级评定{
字号：0；
空白：nowrap；
显示：内联块；
/*宽度：250px；移除此*/
高度：50px；
溢出：隐藏；
位置：相对位置；
背景：url（'data:image/svg+xml；base64，phn2zyb2zjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3lnczlm9yzy8ymdaw1zyigeg1sbnm6egxpbms9imh0dha6y93d3cudzmub3jn5otkvegxpbmsiih9ijbw0imhb4i0ad0imjbwecigagvpz2h0z2h0psiib4i2ib2aw3qm94widag3jzw3jw5jjjw5jjjjjw9jw9jw9jw9jb9jw9jw9jbzzjjjw9w9w9w9jw9w9v9v9v9w9v9w9v9w9w9w9w9czzzzzzzjjjjjjjjj2.研究结果表明，该研究成果具有广泛的应用前景；
背景尺寸：包含；
}
.一级星级{
不透明度：0；
位置：绝对位置；
左：0；
排名：0；
身高：100%；
/*宽度：20%；移除此*/
z指数：1；
背景：url数据：图像/svg+xml；基本64，基本64，基本64，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本4，基本4，基本4，基本6，基本2，基本2，基本2，基本2，基本3，基本3，基本2，基本3，基本2，基本3，基本2，基本3，基本2，基本2，基本3，基本2，基本2，基本2，基本2，基本2，基本3，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本3，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，基本2，2，2，2，基本2，2，基本2，2，2，22.研究结果表明，该研究成果具有广泛的应用前景；
背景尺寸：包含；
}
.星级输入{
-moz外观：无；
-webkit外观：无；
不透明度：0；
显示：内联块；
/*宽度：20%；移除此*/
身高：100%；
保证金：0；
填充：0；
z指数：2；
位置：相对位置；
}
.星级输入：悬停+i，
.星级输入：选中+i{
不透明度：1；
}
.星级i~i{
宽度：40%；
}
.星级i~i~i{
宽度：60%；
}
.星级i~i~i~i{
宽度：80%；
}
.星级i~i~i~i~i{
宽度：100%；
}
：：之后，
：：之前{
身高：100%；
填充：0；
保证金：0；
框大小：边框框；
文本对齐：居中；
垂直对齐：中间对齐；
}
.星级{
宽度：250px；
}
.star-rating.star-5输入，
.star-rating.star-5i{
宽度：20%；
}
.star-rating.star-5i~i{
宽度：40%；
}
.star-rating.star-5i~i~i{
宽度：60%；
}
.star-rating.star-5i~i~i{
宽度：80%；
}
.star-rating.star-5i~i~i~i{
宽度：100%；
}
.星级评定{
宽度：150px；
}
.star-rating.star-3输入，
.star-rating.star-3i{
宽度：33.33%；
}
.star-rating.star-3i~i{
宽度：66.66%；
}
.star-rating.star-3i~i~i{
宽度：100%；
}

---

将一个类

添加到已经给定的等级

，这样，如果该类与以前的

星级

类一起发送，它将使用橙色星级

.star-rating.already input:hover+ i
{
  background: url('/*Url of orange star*/');!important
}

<form method="get" action="" id="form1">
  <span class="star-rating star-5 already-given">
          <input type="radio" name="rating" value="1"><i></i>
          <input type="radio" name="rating" value="2"><i></i>
          <input type="radio" name="rating" value="3"><i></i>
          <input type="radio" name="rating" value="4" checked><i></i>
          <input type="radio" name="rating" value="5"><i></i>
        </span>
</form>

编辑：

（请删除带有橙色星号url的红色）

---

（根据评论中的要求所做的更改）

请帮助我jquery@LizaAsh这里没有使用jquery。您可以更具体地说吗？单击时需要jquery添加此CSS。但在这里，我们可以给两者提供类似的评级检查此演示@lizash。这是您想要的吗？请查看和。

$(document).ready(function(){
  $("input[type=radio]").on("change",function(){
    $(this).parents(".star-rating").removeClass("already-given").addClass("already-given");
  });
});