jQuery 五角星评分

五角星打分

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

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         })