首页 > 代码库 > Jquery学习笔记(2)--五角星评分

Jquery学习笔记(2)--五角星评分

网购五星评分模拟:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="jquery.js"></script>
 7 </head>
 8 <body>
 9     <div>
10         <span class="star"></span>
11         <span class="star"></span>
12         <span class="star"></span>
13         <span class="star"></span>
14         <span class="star"></span>
15     </div>
16 </body>
17     <script type="text/javascript">
18         var isclick = 0;
19         var clicknum = 0;
20         //鼠标滑过,编程黑五角星
21         $(span).mouseover(function(){
22             // if (isclick==0) {
23                 var num = $(this).index();
24                 // alert(num);
25                 $(span).each(function(){
26                     if ($(this).index()<=num) {
27                         $(this).html();
28                     }else{
29                         if ($(this).index()>clicknum) {
30                             $(this).html();
31                         }
32                     }
33                 });
34             // }
35         });
36         //鼠标离开div,变回空心五角星
37         $(div).mouseleave(function(){
38             if (isclick==0) {
39                 $(span).each(function(){
40                     if ($(this).index()>clicknum) {}
41                     $(this).html();
42                 });
43             }else{
44                 $(span).each(function(){
45                     if ($(this).index()>clicknum) {
46                         $(this).html();
47                     }
48                 });
49             }
50         });
51         //鼠标点击,固定黑五角星,并且重新点击后重新固定,离开后不变
52         $(span).click(function(){
53             isclick = 1;
54             clicknum = $(this).index();
55             $(span).each(function(){
56                 if ($(this).index()<=clicknum) {
57                     $(this).html();
58                 }else{
59                     $(this).html();
60                 }
61             });
62         });
63     </script>
64 </html>

 

Jquery学习笔记(2)--五角星评分