类似点亮星星打分功能

html+js

• html部分： 

<ul class="score">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

• css部分

.score {
  list-style: none;
  margin: 0;
  padding: 0;
}
.score li {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid #f00;
  border-radius: 50%;
  cursor: pointer;
}

• js部分：

<script src="jquery-2.1.4.min.js"></script>
<script>
$('.score').click(e=>{
	var i=$(e.target).index();
	console.log(typeof(i))
	$('.score li:not(:gt('+i+'))').css({"background":"red","border":"2px solid green"});
	$('.score li:gt('+i+')').css({"background":"white","border":"1px solid #f00"});
	alert("点亮"+(i+1)+"颗星")
})
</script>