Javascript 有人能修复我用HTML CSS脚本创建的星级吗（星级只会突出显示以前的元素）

我已经使用CSS HTML和Javascript创建了一个星级评定应用程序。 当我点击一颗星星时，它并没有像预期的那样高亮显示。 假设我单击第三颗星，然后在它高亮显示之前只单击两颗星

我不知道该如何处理css属性，它会使当前单击的星号高亮显示

let stars=document.queryselectoral（'.star'）；
document.querySelector（“.star container”）.addEventListener（'click'，starting）；
let rating=document.querySelector（'.rating'）；
函数星号（e）{
如果（例如，target.classList[0]=='star'）{
stars.forEach（（star）=>star.classList.remove（'star_uu选中'）；
对于（i=stars.length-1，j=0；i>=0；i--，j++）{
如果（星[i]！==e.目标）{
stars[i].classList.add（'star_uuuchecked'）；
}否则{
stars[i].classList.add（'star_uuuchecked'）；
rating.textContent=`${j+1}/5`；
打破
}
}
}否则{
stars.forEach（（star）=>star.classList.remove（'star_uu选中'）；
rating.textContent=`${0}/5`；
}
}

.star容器{
显示器：flex；
宽度：350px；
弯曲方向：行反向；
}
.明星{
}
明星：以前{
内容：'\f005'；
字体系列：Fontsome；
字体大小：60px；
位置：相对位置；
显示：块；
颜色：粉红色；
}
明星：之后{
内容：'\f005'；
字体系列：Fontsome；
位置：绝对位置；
顶部：7px；
字体大小：60px；
颜色：金色；
不透明度：0；
}
.星星：悬停：之后，
.星星：悬停~.星星：之后{
不透明度：1；
}
.star\uuu选中~.star:之后{
不透明度：1；
}

文件
0/5

实际上，您的问题就在这条线后面：

.star\uuu选中~.star:之后{
不透明度：1；
}

这里发生了什么事？ 当您对每个所需元素应用

star\uu checked

时，无需为后续同级应用样式

~

用于一般后继同级，因此无论何时定义此类样式，它都只会选择后继元素（因为您使用的是

灵活方向：行反转；

您的元素将从右向左开始，因此它只会高亮显示后继元素）。因此，您应该只应用

不透明度：1用于勾选了星号的元素

如何修复它？
如果您想修复当前代码，只需将上述部分替换为以下内容即可：

.star\uu已选中。star:after{
不透明度：1；
}

您的最终代码如下所示：


let stars=document.queryselectoral（'.star'）；
document.querySelector（“.star container”）.addEventListener（'click'，starting）；
let rating=document.querySelector（'.rating'）；
函数星号（e）{
如果（例如，target.classList[0]=='star'）{
stars.forEach（（star）=>star.classList.remove（'star_uu选中'）；
对于（i=stars.length-1，j=0；i>=0；i--，j++）{
如果（星[i]！==e.目标）{
stars[i].classList.add（'star_uuuchecked'）；
}否则如果（星[i]==e.target）{
stars[i].classList.add（'star_uuuchecked'）；
rating.textContent=`${j+1}/5`；
打破
}
}
}否则{
stars.forEach（（star）=>star.classList.remove（'star_uu选中'）；
rating.textContent=`${0}/5`；
}
}
.star容器{
显示器：flex；
宽度：350px；
弯曲方向：行反向；
}
明星：以前{
内容：'\f005'；
字体系列：Fontsome；
字体大小：60px；
位置：相对位置；
显示：块；
颜色：粉红色；
}
明星：之后{
内容：'\f005'；
字体系列：Fontsome；
位置：绝对位置；
顶部：7px；
字体大小：60px；
颜色：金色；
不透明度：0；
}
.星星：悬停：之后，
.星星：悬停~.星星：之后{
不透明度：1；
}
查过了。查过了。查过了{
不透明度：1；
}

文件
0/5
我做了一些改进：


不需要另一个循环，只需使用
e.target
您可以对值使用
数据值
属性

添加
star\u checked:after
以处理最后一个元素

以下是工作代码：


let stars=document.queryselectoral（'.star'）；
document.querySelector（“.star container”）.addEventListener（'click'，starting）；
let rating=document.querySelector（'.rating'）；
函数星号（e）{
常数星=e.目标；
const val=star.getAttribute（'data-val'）；
stars.forEach（（star）=>star.classList.remove（'star_uu选中'）；
star.classList.add（'star_uuchecked'）；
rating.textContent=`${val}/5`；
}
.star容器{
显示器：flex；
宽度：350px；
弯曲方向：行反向；
}
明星：以前{
内容：'\f005'；
字体系列：Fontsome；
字体大小：60px；
位置：相对位置；
显示：块；
颜色：粉红色；
}
明星：之后{
内容：'\f005'；
字体系列：Fontsome；
位置：绝对位置；
顶部：7px；
字体大小：60px；
颜色：金色；
不透明度：0；
}
.星星：悬停：之后，
.星星：悬停~.星星：之后{
不透明度：1；
}
.star\uuu检查~.star:之后，
.星.星检查：之后{
不透明度：1；
}

0/5
另一个简化版本：


let stars=document.queryselectoral（'.star'）；
document.querySelector（“.star container”）.addEventListener（'click'，starting）；
let rating=document.querySelector（'.rating'）；
函数星号（e）{
stars.forEach（（star）=>star.classList.remove（'star_uu选中'）；
让i=[].indexOf.call（stars，e.target）；
如果（i>-1）{
stars[i].classList.add（'star_uuuchecked'）；
rating.textContent=`${stars.length-i}/5`；
}否则{
rating.textContent=`${0}/5`；
}
}
.star容器{
显示器：flex；
宽度：350px；
弯曲方向：行反向；
}
.star{}
明星：之后{
内容：'\f005'；
字体系列：Fontsome；
字体大小：60px；
显示：块；
颜色：粉红色；
}
.star.star\uuu检查~.star:，