jQuery实现商品五星评价

Posted 2022-02-14 programfield

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于jQuery实现商品五星评价的主要内容，如果未能解决你的问题，请参考以下文章

五星评价

利用jquery实现电商网站常用特效之：五星评分