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

Jquery学习笔记（2）--五角星评分

2024-08-28 05:45:36   222人阅读

网购五星评分模拟：

 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）--五角星评分


联系
我们