使用JS,可以轻而易举的实现星级评论的效果。
效果图如下:
js代码部分
<script>
let _spans=document.querySelectorAll("span");
[..._spans].forEach((_span,index)=>{
_span.onclick=function(){
for(let i=0;i<_spans.length;i++){
if(i<=index){
_spans[i].className='active';
}else{
_spans[i].className='';
}
}
}
})
</script>
html代码部分
<div class="wrapper">
<span class="active">♥</span>
<span>♥</span>
<span>♥</span>
<span>♥</span>
<span>♥</span>
</div>
css代码
.active{
color: red;
}