jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能有截圖

更新時(shí)間：2014年09月15日 09:51:11 投稿：whsnow

本節(jié)主要介紹了jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能，經(jīng)測(cè)試效果相當(dāng)不錯(cuò)，有圖有真相，喜歡的朋友可以參考下

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è)方法？暫且說方法吧。在jquery的文檔可以查得到。

index 在jquery 里是返回元素的索引值，從零開始。分?jǐn)?shù)呢就加1,

您可能感興趣的文章:

評(píng)分

相關(guān)文章

jquery 多個(gè)radio的click事件實(shí)例
下面小編就為大家?guī)硪黄猨query 多個(gè)radio的click事件實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
2016-12-12
jQuery Ajax()方法使用指南
jQuery.ajax()功能比較強(qiáng)大，可配置的參數(shù)比較多，本文主要對(duì)這個(gè)方法的注意事項(xiàng)進(jìn)行總結(jié)。有相同需求的童鞋們也來仔細(xì)看看吧，希望對(duì)大家能有所幫助
2014-11-11
jQuery.ajax實(shí)現(xiàn)根據(jù)不同的Content-Type做出不同的響應(yīng)
使用H5+ASP.NET General Handler開發(fā)項(xiàng)目，使用ajax進(jìn)行前后端的通訊。有一個(gè)場(chǎng)景需求是根據(jù)服務(wù)器返回的不同數(shù)據(jù)類型，前端進(jìn)行不同的響應(yīng)，這里記錄下如何使用$.ajax實(shí)現(xiàn)該需求,需要的朋友可以參考下
2016-11-11
jQuery搜索子元素的方法
這篇文章主要介紹了jQuery搜索子元素的方法,實(shí)例分析了children、find等方法的使用技巧,需要的朋友可以參考下
2015-02-02
jQuery 行級(jí)解析讀取XML文件（附源碼）
項(xiàng)目中應(yīng)用jQuery解析讀取XML語言配置文件來實(shí)現(xiàn)語言的調(diào)度。這是jQuery解析讀取XML文件功能的測(cè)試源碼，現(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
jQuery菜單插件superfish使用指南
Superfish是一款Jquery插件，它能非常容易的建立復(fù)雜的多級(jí)下拉菜單，Superfish使用也非常普遍。你可能用Superfish實(shí)現(xiàn)多種菜單效果。
2015-04-04
基于jquery實(shí)現(xiàn)的表格分頁實(shí)現(xiàn)代碼
該方法的運(yùn)用是從后臺(tái)數(shù)據(jù)庫(kù)中一次性取出所有的數(shù)據(jù)，運(yùn)用Jquery把一部分?jǐn)?shù)據(jù)隱藏起來，事實(shí)上數(shù)據(jù)還是全部在html頁面中
2011-06-06
動(dòng)感效果的TAB選項(xiàng)卡jquery 插件
動(dòng)感效果的TAB選項(xiàng)卡jquery 插件,需要的朋友可以參考下。
2011-07-07