jquery实现动态五角星评分
生活随笔
收集整理的這篇文章主要介紹了
jquery实现动态五角星评分
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
先上代碼，最后附屬上我的實(shí)現(xiàn)思路，新手做的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的環(huán)境，可以去網(wǎng)上直接下載，也可以直接私信我，我給你?<script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){//給每個(gè)span加事件$("#pinfeng span").click(function(){$(this).text("★");//當(dāng)前點(diǎn)擊的元素$(this).siblings().text("★");//當(dāng)前點(diǎn)擊元素的兄弟元素$(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>????????? 實(shí)現(xiàn)思路：先獲取點(diǎn)擊的五角星，設(shè)當(dāng)前點(diǎn)擊的五角星為實(shí)心的，然后調(diào)用siblings()方法，設(shè)所有的同輩五角星都為實(shí)心的，最后再把他之后的所有兄弟（同輩）元素設(shè)為空心的，就這樣，一個(gè)動(dòng)態(tài)評分效果就出來了 歡迎大家的點(diǎn)評，也希望
<!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的環(huán)境，可以去網(wǎng)上直接下載，也可以直接私信我，我給你?<script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){//給每個(gè)span加事件$("#pinfeng span").click(function(){$(this).text("★");//當(dāng)前點(diǎn)擊的元素$(this).siblings().text("★");//當(dāng)前點(diǎn)擊元素的兄弟元素$(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>????????? 實(shí)現(xiàn)思路：先獲取點(diǎn)擊的五角星，設(shè)當(dāng)前點(diǎn)擊的五角星為實(shí)心的，然后調(diào)用siblings()方法，設(shè)所有的同輩五角星都為實(shí)心的，最后再把他之后的所有兄弟（同輩）元素設(shè)為空心的，就這樣，一個(gè)動(dòng)態(tài)評分效果就出來了 歡迎大家的點(diǎn)評，也希望
和大家多多交流！！！
????? 感興趣的可以自己設(shè)置CSS樣式，效果會(huì)更好點(diǎn)！
轉(zhuǎn)載于:https://www.cnblogs.com/a1111/p/6540414.html
總結(jié)
以上是生活随笔為你收集整理的jquery实现动态五角星评分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于C#泛型列表ListT的基本用法总结
- 下一篇： Web前端规范--HTML规范