五星评价 - 码农教程

自引jquery
 1 <style>
 2     * { margin: 0; padding: 0; }
 3     ul { list-style: none; margin: 100px; }
 4     .comment {
 5         color: red;
 6     }
 7 
 8     .comment li {
 9         float: left;
10         font-size: 40px;
11         margin-left:5px;
12     }
13 </style>
14 <body>
15     <ul class="comment">
16         <li id="s">☆ </li>
17         <li>☆</li>
18         <li>☆</li>
19         <li>☆</li>
20         <li>☆</li>
21     </ul>
22 </body>
23 </html>
24 <script src="jquery-1.11.1.min.js"></script>
25 <script>
26     /*
27      1、鼠标移入   ：当前星星和前面的为实心的
28                      当前星星后面的是空心
29      2、鼠标移出  ：
30           未点击： 全部空心
31           有点击： 当前点击的星星和前面的是实心的
32      3、鼠标点击：
33              当前点击的星星和前面的是实心的
34      * */
35     var empSatr = "☆";   
36     var selStar = "★";
37     $(".comment").on('mouseenter','li',function(){
38         $(this).html(selStar).prevAll().html(selStar).end().nextAll().html(empSatr);
39     })
40     $(".comment").on('mouseleave',"li",function(){
41         $("li").html(empSatr);
42         $(".select").html(selStar).prevAll().html(selStar);
43     });
44     $(".comment").on('click',"li",function(){
45         $(this).addClass('select').siblings().removeClass("select");
46     })
47 </script>
原文地址：https://www.cnblogs.com/xiaoyaolang/p/11927514.html