五角星评分案例js

【css】

* {
    padding: 0;
    margin: 0;
}
.comment {
    font-size: 40px;
    color: #ff16cf;
}
.comment li {
    float: left;
}
ul {
    list-style: none;
}

【html】

<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>

【js】

思路：
1. 获取到所有的li赋值给变量lis
2. 给li注册mouseenter鼠标移入事件
3. 给当前的li以及前面所有的li的文字变成实心
4. 给ul注册mouseleave
5. 让所有的li变成空心
6. 给li注册click
7. 给当前的li添加个标记，当我鼠标离开的时候，根据这个标记找到点击的li，让这个li和前面的li文字变成实心的

<script>
         $(function () {
        var lis = $('.comment li')
        var sx = '★'
        var kx = '☆'
        //prevAll()和nextAll()不用同时使用,要用end()隔开或两行 sx实心  kx空心
        lis.on('mou