怎么用jQuery写五星评价

jQuery

 <script src="../jquery-1.8.3.min.js"></script>
    <script>
        /*jQuery的查询对象是类数组对象，
        在js中类数组是不能用数组的函数的，要怎样解决jQuery查询对象
        不能用js数组函数的问题
        解决：
        jQuery自己模仿数组的函数，自己写了两个功能一样的数组函数
        这两个模仿的数组函数，jQuery的查询对象类数组也可以使用
        模仿的函数一：js中的indexof()，jq中有index()也可以用来
        根据数组索引值查找对应的元素
        */
          //获取元素
          /*jq的on方法的作用:在被选的元素上添加一个或多个事件程序
          on方法的语法:参数1:要在score添加的事件,参数2:规定只能添加指定
          子元素的事件处理程序,参数3:传输到函数的额外数据
          参数4:click事件发生时运行的函数
          */
          $("ul.score")
          .on('click','li',function(){
            //   alert("hit me");
            // 获得当前点中的是第几个li
            //var i=$("ul.score>li").index(this)
            /*简写形式:
            由于jq的index函数默认只在父元素下找
            而上面只有一个ul所以可以简写成
            */
            var i=$(this).index();
            //alert(i);
            //如果li<i+1则li变为黄色 (小于i,+1后包括i)
            /*ul.score下的li如果小于i+1的位置，颜色为pink*/
            $(`ul.score>li:lt(${i+1})`).css("background","pink");
            /* ul.score下的li如果大于i则颜色不变 (大于i但不包括i)*/
            $(`ul.score>li:gt(${i})`).css("background","#fff");
          })
    </script>

HTML

 <h3>打分案例</h3>
    <ul class="score">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

CSS

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