jQuery 五角星评分

五角星打分

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

1.html

  <ul class="comment">
         <li>☆</li>
         <li>☆</li>
         <li>☆</li>
         <li>☆</li>
         <li>☆</li>
     </ul>

2.css

  * {
             margin:;
             padding:;
         }

         .comment {
             font-size: 45px;
             color: orange;
             list-style: none;
         }

         .comment li {
             float: left;
         }

3.jquery

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