码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现商品五星评价

时间:2019-06-26 20:40:18      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:实现   charset   script   html   wrap   char   click   lang   div   

 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>

 

jQuery实现商品五星评价

标签:实现   charset   script   html   wrap   char   click   lang   div   

原文地址:https://www.cnblogs.com/programfield/p/11093573.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!