jQuery星級評分實現過程詳解
在實際應用中經常會看到星級評分程式碼的使用,下面就通過程式碼例項介紹一下次效果的實現過程,當然實現的方式有很多種,效果也不可能和實際應用中那樣絢麗,這裡只是介紹一下它的大體實現過程。
程式碼如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> ul{ list-style:none; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(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("★"); $("#p").html(parseInt( $(this).index("#div li"))+1); } }); $("#div li").mousedown(function(){ $("#score").html(("你選擇的分數是" + (parseInt($(this).index("#div li")) + 1))); $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★") $(this).unbind().prevAll().unbind().nextAll().unbind(); }); }) </script> </head> <body> <body> <p id="p"></p> <p id="score"></p> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div> </body> </body> </html>
上面的程式碼實現了簡單的評分功能,下面介紹一下它的實現過程。
一.程式碼註釋:
1.$(function(){}),當文件結構完全載入完畢再去執行函式中的程式碼。
2.$("#div li").bind({}),為div下的li元素繫結事件處理函式,bind的引數是一個物件直接量,這樣就可以一次註冊多個。
3.mouseout:function(){
$(this).css("color","black").html("☆").prevAll().css("color", "black").html("☆")
},註冊mouseout事件處理函式。
3.1.$(this).css("color","black"),將當前所在的li元素的顏色設定為黑色。
3.2.html("☆"),將當前li元素中的星星換成空心的。
3.3.prevAll(),獲取當前li元素前面所有的li元素。
3.4.css("color", "black").html("☆"),將顏色設定為黑色,並且將內容設定為空心星星,也就是沒有被選中。
4.mouseover:function(){
$(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
},註冊mouseover事件處理函式。
4.1.$(this).css("color", "red"),將當前li的內容顏色設定為紅色。
4.2.html("★"),將li的內容設定為實心星星。
4.3.prevAll().css("color", "red").html("★"),將前面的所有li的顏色設定為紅色,並且內容為實心星星。
5.$("#p").html(parseInt( $(this).index("#div li"))+1),設定p元素中的內容,很簡單不用多說。
6.$("#div li").mousedown(function(){
$("#score").html(("你選擇的分數是" + (parseInt($(this).index("#div li")) + 1)));
$(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
$(this).unbind().prevAll().unbind().nextAll().unbind();
}),為div下的li元素註冊mousedown事件處理函式。6.1.$("#score").html(("你選擇的分數是" + (parseInt($(this).index("#div li")) + 1))),將分數寫入指定的元素。
6.2.$(this).css("color", "red").html("★").prevAll().css("color", "red").html("★"),將當前li元素和它之前的li元素中的內容設定為實心星星,並且將顏色設定為紅色。
6.3.$(this).unbind().prevAll().unbind().nextAll().unbind(),解綁元素上註冊的事件處理函式。
二.相關閱讀:
1.prevAll()函式可以參閱jQuery prevAll()一章節。
2.index()函式可以參閱jQuery index()一章節。
3.nextAll()函式可以參閱jQuery nextAll()一章節。
相關文章
- jQuery星級評分效果詳解jQuery
- 滑鼠劃過星級評分效果詳解
- jQuery+PHP實現購物商城常用的星級評分效果jQueryPHP
- Qml 實現星級評分元件 已釋出元件
- 三種方式使用純 CSS 實現星級評分CSS
- 星級評價的實現
- jQuery-五角星評分案例jQuery
- 【Node】詳解模組的實現過程
- 基於SVG的jQuery星級評分外掛-jRateSVGjQuery
- 詳細瞭解 synchronized 鎖升級過程synchronized
- MapReduce過程詳解
- Flutter星級評選Flutter
- 常見下載方式之BT下載實現過程詳解
- 堆排序的Python實現(附詳細過程圖和講解)排序Python
- jQuery入門(六)jQuery實現瀑布分頁jQuery
- jQuery三級導航選單詳解jQuery
- js+css+php實現點選五星進行評分JSCSSPHP
- 使用 jQuery 實現分頁功能jQuery
- jQuery實現3D圖片輪播詳解jQuery3D
- jQuery實現簡易商城系統專案實操詳解jQuery
- jQuery入門(七)jQuery實現按鈕分頁jQuery
- 多圖詳解萬星 Restful 框架原理與實現REST框架
- jquery實現四級級聯下拉選單jQuery
- SSL/TLS 握手過程詳解TLS
- mongo 儲存過程詳解Go儲存過程
- 轉:DNS解析過程詳解DNS
- Redis複製過程詳解Redis
- RabbitMQ安裝過程詳解MQ
- 【elasticsearch】搜尋過程詳解Elasticsearch
- Jquery實現微博分享評論表情特效jQuery特效
- Flutter | 擼一個高大上的星級評分控制元件Flutter控制元件
- jQuery實進度條效果詳解jQuery
- promise實現過程Promise
- 理論+實驗 詳解Oracle安裝部署過程Oracle
- 幾大排序演算法的理解和程式碼實現(超級詳細的過程)排序演算法
- RPC(遠端過程呼叫)詳解RPC
- SpringIOC初始化過程--詳解Spring
- 詳解Linux 程式編譯過程Linux編譯
- Spring AOP實現過程Spring