码迷,mamicode.com
首页 > 其他好文 > 详细

五星评价

时间:2019-11-25 15:31:41      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:class   sele   jquery   leave   round   function   rip   his   fun   

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

 

五星评价

标签:class   sele   jquery   leave   round   function   rip   his   fun   

原文地址:https://www.cnblogs.com/xiaoyaolang/p/11927514.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!