我的位置:首页 > 资讯>五星评价

五星评价

时间:2019-11-25 14:21:00 来源:互联网 热度: 作者: 佚名 字体:

自引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>