jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能實(shí)例
本文實(shí)例講述了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代碼如下:
<script type="text/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();
});
})
</script>
希望本文所述對(duì)大家的jQuery WEB程序設(shè)計(jì)有所幫助
- 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)分功能有截圖
- jquery五角星評(píng)分插件示例分享
- jQuery插件-jRating評(píng)分插件源碼分析及使用方法
- 基于jQuery的星級(jí)評(píng)分插件
- 如何基于jQuery實(shí)現(xiàn)五角星評(píng)分
相關(guān)文章
js之ActiveX控件使用說明 new ActiveXObject()
ActiveX 控件廣泛用于Internet。它們可以通過提供視頻、動(dòng)畫內(nèi)容等來增加瀏覽的樂趣。不過,這些程序可能出問題或者向您提供不需要的內(nèi)容2014-03-03
jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法
這篇文章主要介紹了jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法,涉及jQuery針對(duì)頁面元素的操作技巧,需要的朋友可以參考下2015-06-06
30個(gè)經(jīng)典的jQuery代碼開發(fā)技巧
這篇文章主要介紹了30個(gè)經(jīng)典的jQuery代碼開發(fā)技巧,包含了常見屬性、方法、元素等的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
用jQuery實(shí)現(xiàn)的智能隱藏、滑動(dòng)效果的返回頂部代碼
這篇文章主要介紹了用jQuery實(shí)現(xiàn)的智能隱藏、帶滑動(dòng)效果的返回頂部代碼,非常實(shí)用,需要的朋友可以參考下2014-03-03
jQuery綁定事件-多種實(shí)現(xiàn)方式總結(jié)
下面小編就為大家?guī)硪黄猨Query綁定事件-多種實(shí)現(xiàn)方式總結(jié)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05
淺談EasyUI中Treegrid節(jié)點(diǎn)的刪除
本文給大家介紹的是EasyUI中樹節(jié)點(diǎn)(Treegrid節(jié)點(diǎn))的刪除的方法和示例,這里推薦給大家,希望對(duì)大家能有所幫助。2015-03-03
jQuery動(dòng)態(tài)改變圖片顯示大小(修改版)的實(shí)現(xiàn)思路及代碼
這篇文章主要介紹了jQuery動(dòng)態(tài)改變圖片顯示大小(修改版)的實(shí)現(xiàn)思路及代碼,有需要的朋友可以參考一下2013-12-12
表頭固定(利用jquery實(shí)現(xiàn)原理介紹)
表頭固定應(yīng)該是一個(gè)用得比較多的功能,參考了網(wǎng)上幾個(gè)例子,在幾個(gè)常用瀏覽器下顯示不是很完美2012-11-11

