案例：五角星评价案例 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>五角星评分案例</title>
 6     <style>
 7         * {
 8             padding: 0;
 9             margin: 0;
10         }
11 
12         .comment {
13             font-size: 40px;
14             color: #ff3100;
15         }
16 
17         .comment li {
18             float: left;
19             cursor: pointer;
20         }
21 
22         ul {
23             list-style: none;
24         }
25     </style>
26     <script src="jquery-1.11.1.js"></script>
27     <script>
28         $(function () {
29             var wjx_none = '☆'; // 空心五角星
30             var wjx_sel = '★'; // 实心五角星
31 
32             $(".comment li").on("mouseenter", function () {
33                 //需求1:鼠标移动到哪里，让当前星星和之前的变为实心五角星，之后的保持空心
34                 //$(this).text(wjx_sel).prevAll("li").text(wjx_sel);
35                 //$(this).nextAll("li").text(wjx_none);
36                 //代码合二为一，end()方法
37                     $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
38             });
39             $(".comment li").on("click", function () {
40                 //鼠标点击，给当前星星添加一个markStar类名进行记录，并且清除兄弟元素的类名
41                 $(this).attr("class","markStar").siblings("li").removeAttr("class");
42             })
43             $(".comment li").on("mouseleave", function () {
44                 //需求2:鼠标离开后，根据带有markStar类名的星星，进行当前和之前实心，之后空心
45                 //bug:如果没有进行点击，就无法记录带有markstar类名的星星，解决方法：进行判断
46                 if($("li.markStar").length === 0){
47                     $(".comment li").text(wjx_none);
48                 }else{
49                     $("li.markStar").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
50                 }
51             })
52 
53         });
54     </script>
55 </head>
56 
57 <body>
58 
59     <ul class="comment">
60         <li>☆</li>
61         <li>☆</li>
62         <li>☆</li>
63         <li>☆</li>
64         <li>☆</li>
65     </ul>
66 
67 </body>
68 </html>

 

posted @ 2017-12-20 00:59  GodCe  阅读(371)  评论(0)    收藏  举报