jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能有截圖
html
<body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div> <p id="p"></p> <p id="score"></p> </body>
id="p"顯示即時(shí)分?jǐn)?shù)
id="score"顯示最終分?jǐn)?shù)----------------------------------------------
javascript“
$(function () { //為所有的li標(biāo)簽綁定mouseout和mouseover事件。bind({事件名:function(){},事件名:function(){}})的方法綁定多個(gè)事件 $("#div li").bind({ mouseout:function () { $(this).css("color", "black").html("☆").prevAll().css("color", "black").html("☆") }, mouseover: function () { $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★") } }); //=實(shí)時(shí)顯示分?jǐn)?shù).【index】搜索匹配的元素,并返回相應(yīng)元素的索引值,從0開始計(jì)數(shù)。 $("#div li").mouseover(function () { $("#p").html(parseInt( $(this).index("#div li"))+1); }); //鼠標(biāo)按下時(shí),確定分?jǐn)?shù)。額,就不更改了,大局已定。 $("#div li").mousedown(function () { $("#score").html(("你選擇的分?jǐn)?shù)是" + (parseInt($(this).index("#div li")) + 1))); $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★") //全部li標(biāo)簽的綁定事件全部清除--unbind方法可以加參數(shù)清除特定的事件。不加全部清除 $(this).unbind().prevAll().unbind().nextAll().unbind(); }); })
出現(xiàn)的效果是這樣的:
可惜的是你一點(diǎn)擊下去--就不可更改了。真的是很悲傷啊。大概也只是做了一個(gè)小樣子而已。
prevAll() 和nextAll()這兩個(gè)方法?暫且說(shuō)方法吧。在jquery的文檔可以查得到。
index 在jquery 里是返回元素的索引值,從零開始。分?jǐn)?shù)呢就加1,
- jQuery超贊的評(píng)分插件(8款)
- jQuery動(dòng)態(tài)星級(jí)評(píng)分效果實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)用戶打分評(píng)分特效
- jquery插件star-rating.js實(shí)現(xiàn)星級(jí)評(píng)分特效
- 使用jQuery實(shí)現(xiàn)星級(jí)評(píng)分代碼分享
- jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能實(shí)例
- jquery五角星評(píng)分插件示例分享
- jQuery插件-jRating評(píng)分插件源碼分析及使用方法
- 基于jQuery的星級(jí)評(píng)分插件
- 如何基于jQuery實(shí)現(xiàn)五角星評(píng)分
相關(guān)文章
基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞
這篇文章主要介紹了基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10jQuery中[attribute!=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute!=value]選擇器用法,實(shí)例分析了[attribute!=value]選擇器匹配不包含指定屬性元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12jQuery Autocomplete自動(dòng)完成插件
jQuery Autocomplete plugin 寫的比較滿意,拿出來(lái)分享,歡迎大家找BUG。2010-07-07jQuery+css實(shí)現(xiàn)的換頁(yè)標(biāo)簽欄效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的換頁(yè)標(biāo)簽欄效果,涉及jQuery動(dòng)態(tài)操作頁(yè)面元素構(gòu)造換頁(yè)標(biāo)簽的相關(guān)技巧,需要的朋友可以參考下2016-01-01可以顯示單圖片,多圖片ajax請(qǐng)求的ThickBox3.1類下載
ThickBox是一個(gè)基于JQuery類庫(kù)的擴(kuò)展 以下的是ThickBox3.1的實(shí)例+代碼調(diào)用方法2007-12-12jQuery.Validate驗(yàn)證庫(kù)的使用介紹
本篇文章介紹了,jQuery.Validate驗(yàn)證庫(kù)的使用。需要的朋友參考下2013-04-04