SOURCE

/* 这里写 JS */
function test() {
  //alert('It worked!')
  
  $("section div").click(function(){
      $(this).addClass('star');
      $(this).prevAll().addClass('star');
      $(this).nextAll().removeClass('star');

  })

  var star=document.getElementsByClassName("star");
  var score=star.length;
  $("#score").html(score);
  
}

<h3>实现一个五分制打分组件</h3>

<h4>请把组件写在 #answer-area 内</h4>
<section id="answer-area" onclick="test()">

	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
    <label id="score">5</label>
</section>

<!-- 以下为题干 -->

<pre>
要求：使用原生HTML, CSS, JS（ES6）
注：你可以在做题时可以查 Baidu、Google、Stack Overflow。
</pre>

<pre>
- 样式上表现为5个方块（或是别的简单图形, ★/☆ 符号等），水平铺开
- 方块默认为灰色
- 鼠标移到第3个方块，点击后，前三个方块变为别的颜色（比如黄三色），意味着用户打了3星；
- 这时候再去点第2个方块，这时就变成了打2星；
- 在五个方块最右边显示打分的数字, 比如打2星就显示数字2.
</pre>

/* 这里写 css */

#answer-area {
  border: 1px solid black;
  height: 100px;
}

div{
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border: 1px solid red;
    background-color: gray;
    float:left;
}

.star{
    background-color: yellow;
}

#score{
    font-size: 20px;
}