五角星打分??

我用的是搜狗輸入法上帶的特殊符號打出來的? 空五角星：☆? 實五角星：★

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

?

轉載于:https://www.cnblogs.com/xiemin-minmin/p/11027522.html

總結

以上是生活随笔為你收集整理的jQuery 五角星评分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。