jquery實現(xiàn)類似淘寶星星評分功能有截圖
更新時間：2014年09月15日 09:51:11 投稿：whsnow
本節(jié)主要介紹了jquery實現(xiàn)類似淘寶星星評分功能，經(jīng)測試效果相當(dā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"顯示即時分?jǐn)?shù)
id="score"顯示最終分?jǐn)?shù)----------------------------------------------
javascript“
$(function () {
//為所有的li標(biāo)簽綁定mouseout和mouseover事件。bind({事件名：function(){},事件名：function(){}})的方法綁定多個事件
$("#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("★")
}
});
//=實時顯示分?jǐn)?shù).【index】搜索匹配的元素，并返回相應(yīng)元素的索引值，從0開始計數(shù)。
$("#div li").mouseover(function () {
$("#p").html(parseInt( $(this).index("#div li"))+1);
});
//鼠標(biāo)按下時，確定分?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)的效果是這樣的：
可惜的是你一點擊下去--就不可更改了。真的是很悲傷啊。大概也只是做了一個小樣子而已。
prevAll() 和nextAll()這兩個方法？暫且說方法吧。在jquery的文檔可以查得到。
index 在jquery 里是返回元素的索引值，從零開始。分?jǐn)?shù)呢就加1,
相關(guān)文章
下面小編就為大家?guī)硪黄猨query 多個radio的click事件實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
jQuery.ajax()功能比較強(qiáng)大，可配置的參數(shù)比較多，本文主要對這個方法的注意事項進(jìn)行總結(jié)。有相同需求的童鞋們也來仔細(xì)看看吧，希望對大家能有所幫助2014-11-11
jQuery.ajax實現(xiàn)根據(jù)不同的Content-Type做出不同的響應(yīng)
使用H5+ASP.NET General Handler開發(fā)項目，使用ajax進(jìn)行前后端的通訊。有一個場景需求是根據(jù)服務(wù)器返回的不同數(shù)據(jù)類型，前端進(jìn)行不同的響應(yīng)，這里記錄下如何使用$.ajax實現(xiàn)該需求,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了jQuery搜索子元素的方法,實例分析了children、find等方法的使用技巧,需要的朋友可以參考下2015-02-02
項目中應(yīng)用jQuery解析讀取XML語言配置文件來實現(xiàn)語言的調(diào)度。這是jQuery解析讀取XML文件功能的測試源碼，現(xiàn)拿出來分享。2009-10-10
jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
這篇文章主要為大家解決下為什么jQuery綁定事件不執(zhí)行而alert后可以正常執(zhí)行,需要的朋友可以參考下2014-06-06
jQuery 1.0.4 - New Wave Javascript(js源文件)
jQuery 1.0.4 - New Wave Javascript(js源文件)...2007-01-01
Superfish是一款Jquery插件，它能非常容易的建立復(fù)雜的多級下拉菜單，Superfish使用也非常普遍。你可能用Superfish實現(xiàn)多種菜單效果。2015-04-04
基于jquery實現(xiàn)的表格分頁實現(xiàn)代碼
該方法的運用是從后臺數(shù)據(jù)庫中一次性取出所有的數(shù)據(jù)，運用Jquery把一部分?jǐn)?shù)據(jù)隱藏起來，事實上數(shù)據(jù)還是全部在html頁面中2011-06-06
動感效果的TAB選項卡jquery 插件,需要的朋友可以參考下。2011-07-07