jquery实现动态五角星评分
生活随笔
收集整理的這篇文章主要介紹了
jquery实现动态五角星评分
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先上代碼，最后附屬上我的實現思路，新手做的bug多，大牛勿噴：請看代碼： ☆☆☆☆☆
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title>//此處是引入jQuery的環境，可以去網上直接下載，也可以直接私信我，我給你?<script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){//給每個span加事件$("#pinfeng span").click(function(){$(this).text("★");//當前點擊的元素$(this).siblings().text("★");//當前點擊元素的兄弟元素$(this).nextAll().text("☆");//之后的兄弟元素空心})})</script><style type="text/css">#pinfeng span{cursor: pointer;}</style> </head> <body><div id="pinfeng"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div> </body> </html>????????? 實現思路：先獲取點擊的五角星，設當前點擊的五角星為實心的，然后調用siblings()方法，設所有的同輩五角星都為實心的，最后再把他之后的所有兄弟（同輩）元素設為空心的，就這樣，一個動態評分效果就出來了 歡迎大家的點評，也希望
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title>//此處是引入jQuery的環境，可以去網上直接下載，也可以直接私信我，我給你?<script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){//給每個span加事件$("#pinfeng span").click(function(){$(this).text("★");//當前點擊的元素$(this).siblings().text("★");//當前點擊元素的兄弟元素$(this).nextAll().text("☆");//之后的兄弟元素空心})})</script><style type="text/css">#pinfeng span{cursor: pointer;}</style> </head> <body><div id="pinfeng"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div> </body> </html>????????? 實現思路：先獲取點擊的五角星，設當前點擊的五角星為實心的，然后調用siblings()方法，設所有的同輩五角星都為實心的，最后再把他之后的所有兄弟（同輩）元素設為空心的，就這樣，一個動態評分效果就出來了 歡迎大家的點評，也希望
和大家多多交流！！！
????? 感興趣的可以自己設置CSS樣式，效果會更好點！
轉載于:https://www.cnblogs.com/a1111/p/6540414.html
總結
以上是生活随笔為你收集整理的jquery实现动态五角星评分的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于C#泛型列表ListT的基本用法总结
- 下一篇： 放弃OT了，找了个新框架ThinkCMF