jQuery 五角星评分

Posted 2022-01-12 xiemin-minmin

五角星打分  

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

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         )