jQuery实现商品五星评价 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         ul{
 8             list-style:none;
 9         }
10 
11         li{
12             float:left;
13             font-size: 30px;
14             color: #f40;
15             cursor: pointer;
16         }
17 
18         .current{
19 
20         }
21 
22     </style>
23 </head>
24 <body>
25     <div class="wrap">
26         <ul>
27             <li>☆</li>
28             <li>☆</li>
29             <li>☆</li>
30             <li>☆</li>
31             <li>☆</li>
32         </ul>
33     </div>
34 
35     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
36 
37     <script>
38         $(function () {
39             $("li").on("mouseenter",function () {
40                 $(this).text("★").prevAll().text("★");
41                 $(this).nextAll().text("☆");
42             });
43 
44 
45             $("ul").on("mouseleave",function () {
46                 $(this).children().text("☆");
47                 $(".current").text("★").prevAll().text("★");
48                 $(".current").nextAll().text("☆");
49             });
50 
51             $("li").on("click",function () {
52                $(this).addClass("current").siblings().removeClass();
53             });
54 
55 
56 
57         });
58     </script>
59 
60 
61 
62 
63 
64 
65 
66 </body>
67 </html>

 

posted @ 2019-06-26 20:02  programerfield  阅读(623)  评论(0)    收藏  举报