码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 五角星评分

时间:2019-06-15 15:47:16      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:com   addclass   分数   ext   float   list   function   输入法   over   

五角星打分  

我用的是搜狗输入法上带的特殊符号打出来的  空五角星:☆  实五角星:★

1.html

1  <ul class="comment">
2         <li></li>
3         <li></li>
4         <li></li>
5         <li></li>
6         <li></li>
7     </ul>

2.css

 1  * {
 2             margin: 0;
 3             padding: 0;
 4         }
 5         
 6         .comment {
 7             font-size: 45px;
 8             color: orange;
 9             list-style: none;
10         }
11         
12         .comment li {
13             float: left;
14         }

3.jquery

 1  $(function() {
 2             $(".comment li").hover(function() {
 3                 // over
 4                 //prevAll()获取当前元素之前的所有兄弟元素
 5                 $(this).text("★").prevAll().text("★");
 6             }, function() {
 7                 // out
 8                 //如果被点中的话就不变成空的五角星 这里用的是三元一次运算符判断的
 9                 $(this).hasClass("clicked") ? (this).text("★").prevAll().text("★") : $(this).text("☆").prevAll().text("☆");
10             }).click(function() {
11                 //addClass只是用来判断是否被点中
12                 $(this).addClass("clicked").prevAll().addClass("clicked");
13                 //分数
14                 alert(($(this).prevAll().length + 1) * 20 + "分");
15             });
16         })

 

jQuery 五角星评分

标签:com   addclass   分数   ext   float   list   function   输入法   over   

原文地址:https://www.cnblogs.com/xiemin-minmin/p/11027522.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!