关于淘宝上星星评价如何做出来的
程序员文章站
2023-12-24 19:33:45
一个简单的case ：关于各类评价网站的上星星； 仅供学习参考！自己平时学习的笔记。如有疑问和代码缺陷，欢迎评论！~~~~ ......
一个简单的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>
仅供学习参考！自己平时学习的笔记。如有疑问和代码缺陷，欢迎评论！~~~~