五角星评论案例

最新推荐文章于 2019-12-14 16:56:10 发布

转载最新推荐文章于 2019-12-14 16:56:10 发布 · 159 阅读

本文介绍了一个基于HTML、CSS和jQuery的简单五角星评分系统。通过鼠标悬停和点击事件，用户可以轻松地对内容进行评级。该系统利用jQuery来改变五角星图标的状态，并保存用户的评分选择。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>五角星评论案例</title>
 6     <style>
 7         * { padding: 0; margin: 0; }
 8         .comment {
 9             font-size: 40px;
10             color: teal;
11         }
12         .comment li {
13             float: left;
14         }
15         ul { list-style: none;}
16     </style>
17     <script src="jquery-1.11.3.min.js"></script>
18     <script>
19         $(function(){
20             var wjx_none = '☆',
21                 wjx_sel  = '★';
22             $(".comment li").mouseenter(function(){
23                 //鼠标移入: 自己和前面的兄弟变实心，其余变空心
24                 $(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
25             }).click(function(){
26                 //鼠标点击后，把自己添加clicked类，其余的清除clicked类
27                 $(this).addClass('clicked').siblings().removeClass('clicked');
28             });
29 
30             //当鼠标移开评分控件时，实心显示到被点击的五角星的上
31             $(".comment").mouseleave(function(){
32                 $(".comment li").text(wjx_none);//先给所有五角星都变空心
33 
34                 $(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
35             });
36 
37             $("li").click(function(){
38                 $(this).data("clicked", true);
39 
40                 // if($(this).data("clicked") === true ) {
41 
42                 // }
43             });
44         });
45 
46 
47     </script>
48 </head>
49 <body>
50 <ul class="comment">
51     <li>☆</li>
52     <li ts="122" class="ss">☆</li>
53     <li>☆</li>
54     <li>☆</li>
55     <li>☆</li>
56 </ul>
57 </body>
58 </html>