关于淘宝上星星评价如何做出来的

最新推荐文章于 2021-04-02 18:57:59 发布

qq_45670012

最新推荐文章于 2021-04-02 18:57:59 发布

阅读量365

点赞数

分类专栏：前端文章标签： jquery

原文链接：https://www.mk2048.com/blog/blog.php?id=hh1kh2ak2h1j&title=%E5%85%B3%E4%BA%8E%E6%B7%98%E5%AE%9D%E4%B8%8A%E6%98%9F%E6%98%9F%E8%AF%84%E4%BB%B7%E5%A6%82%E4%BD%95%E5%81%9A%E5%87%BA%E6%9D%A5%E7%9A%84

版权

前端专栏收录该内容

1223 篇文章

订阅专栏

一个简单的case ：关于各类评价网站的上星星；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 
10     <style>
11         li {
12             list-style: none;
13             float: left;
14             font-size: 36px;
15             color: yellow;
16             cursor: pointer;
17         }
18     </style>
19     <script src="jquery-1.12.4.js"></script>
20     <script>
21         var stark = "☆";
22         var stars = "★";
23         //鼠标进入事件改变星星的颜色为实体，让当前的星星前面全为实体，后面为空心
24         $(function () {
25             $("li").on("mouseenter", function () {
26                 $(this).text(stars).prevAll().text(stars);
27                 $(this).nextAll().text(stark);
28             });
29 
30             //鼠标离开事件，让所有的星星为空心；
31             $("li").on("mouseleave", function () {
32                 $("li").text(stark);
33                 //让class 为current的 前面所有的星星为实体，后面的星星为空
34                 $("li.current").text(stars).prevAll().text(stars);
35             })
36 
37             //注册点击事件，让当前点击的前面的星星全为实体；
38             $("li").on("click",function () {
39                 $(this).addClass("current").siblings().removeClass("current");
40             })
41 
42 
43 
44 
45 
46         })
47     </script>
48 
49 </head>
50 
51 <body>
52     <div>
53         <ul>
54             <li>☆</li>
55             <li>☆</li>
56             <li>☆</li>
57             <li>☆</li>
58             <li>☆</li>
59         </ul>
60     </div>
61 </body>
62 
63 </html>