【jquery】优化仿淘宝五星评价打分(附注释)
生活随笔
收集整理的這篇文章主要介紹了
【jquery】优化仿淘宝五星评价打分(附注释)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在前面的博文http://blog.csdn.net/lzgs_4/article/details/47913629，我們已經把仿淘寶五星評價打分功能實現出來了，實現五星打分的思路基本就是前面博文提到的，但當有成千上萬顆星星的時候，程序估計會長得很難看了。為了代碼更加精簡和有效率，我們來優化一下程序。
用到的星星素材可在前面的博客找到云盤鏈接：http://blog.csdn.net/lzgs_4/article/details/47912753
話不多說，上碼：
<html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <style type="text/css">img:hover{cursor: pointer;} </style> </head> <body><div><img src="img/star.png"/><img src="img/star.png"/><img src="img/star.png"/><img src="img/star.png"/><img src="img/star.png"/><span></span></div> </body> <script type="text/javascript">$('img').each(function(index){var star='img/star.png'; //普通灰色星星圖片的存儲路徑var starRed='img/star_red.png'; //紅色星星圖片存儲路徑var prompt=['很差','比較差','一般','比較好','非常好']; //評價提示語this.id=index; //遍歷img元素，設置單獨的id$(this).on("mouseover click",function(){ //設置鼠標滑動和點擊都會觸發事件$('img').attr('src',star);//當“回滾”、“改變主意”時，先復位所有圖片為木有打星的圖片顏色$(this).attr('src',starRed); //設置鼠標當前所在圖片為打星顏色圖$(this).prevAll().attr('src',starRed); //設置鼠標當前的前面星星圖片為打星顏色圖$(this).siblings('span').text(prompt[this.id]); //根據id的索引值作為數組的索引值});}); </script> </html>效果圖：
這樣程序看起來就不會那么臃腫了，試下吧O(∩_∩)O~
Author:致知
Sign:路漫漫其修遠兮，吾將上下而求索。
總結
以上是生活随笔為你收集整理的【jquery】优化仿淘宝五星评价打分(附注释)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电子商务成功案例
- 下一篇： 金融财务工作汇报PPT-朴尔PPT