标签: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 })
标签:com addclass 分数 ext float list function 输入法 over
原文地址:https://www.cnblogs.com/xiemin-minmin/p/11027522.html