jQuery实现商品五星评价

最新推荐文章于 2021-12-11 17:34:31 发布

weixin_30896825

最新推荐文章于 2021-12-11 17:34:31 发布

阅读量394

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/programfield/p/11093573.html

版权

 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>

转载于:https://www.cnblogs.com/programfield/p/11093573.html

weixin_30896825

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现商品五星评价

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 ul{ 8 ...
复制链接

扫一扫