五角星打分  

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

1.html

1  
     
      2         
      
☆
3         
      
☆
4         
      
☆
5         
      
☆
6         
      
☆
7     
     

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