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>
