1.在項(xiàng)目中碰到了商品評(píng)價(jià)頁(yè)面，里面有關(guān)于對(duì)商品的星星評(píng)價(jià)，當(dāng)時(shí)的我只是把效果寫出來(lái)了（就是用戶點(diǎn)擊幾顆星星亮就顯現(xiàn)幾顆亮），

當(dāng)我做好頁(yè)面交給后端同事的時(shí)候，他說(shuō)我這樣做沒(méi)有意義他沒(méi)法做，那時(shí)我的腦子有些懵了。

后來(lái)后端同事說(shuō)他來(lái)?yè)v騰算了，作為一名21世紀(jì)的陽(yáng)光好青年怎么能夠把自己的任務(wù)都讓同事來(lái)幫忙完成呢~

通過(guò)同事一番指教和自己的探索，總算明白了這里面的關(guān)系，下面我通過(guò)自己的話來(lái)說(shuō)明這個(gè)程序應(yīng)該怎么寫，要具備哪些操作。

a，先上圖：

b:上面圖片評(píng)價(jià)一個(gè)亮了5顆，一個(gè)亮了4顆，是什么東西讓它這樣的呢？見下圖：

是的，沒(méi)錯(cuò)，起始星星的點(diǎn)亮顆數(shù)就是因?yàn)閐ata

c: 現(xiàn)在可以來(lái)談?wù)撘幌逻@個(gè)data了，可是這個(gè)data是個(gè)什么東西呢？

原來(lái)他是前端和后端約定好在取存數(shù)據(jù)的地方（可以給它取任意名字tada,tdat都可以），后端可以給它賦值，data等于多少就亮多少顆星星?？墒菫槭裁匆@個(gè)data呢？

是醬紫的：用戶a點(diǎn)擊星星的時(shí)候是為了之后可以給用戶b用戶c用戶d...看的,所以用戶點(diǎn)擊的這個(gè)星星的個(gè)數(shù)必須可以存儲(chǔ)（賦值）在某個(gè)地方（也就是data）上讓后臺(tái)能夠取到

也就是前端賦值，后端取值，而后后端把取得的數(shù)據(jù)儲(chǔ)存在數(shù)據(jù)庫(kù)中而后重新賦值于data上，以顯示用戶a曾評(píng)價(jià)的好評(píng)的星星個(gè)數(shù)。

前端賦值-----》后端取值--》后端儲(chǔ)存數(shù)據(jù)--》后端根據(jù)儲(chǔ)存的數(shù)據(jù)反饋給前端--》前端根據(jù)后端反饋的數(shù)據(jù)在頁(yè)面中展現(xiàn)相應(yīng)的效果

好了，清楚了邏輯就可以寫程序了：

$('.evaluate_mark').each(function(){
var star = $(this).find('.u-grade').attr('data'); //獲取data 一個(gè)為5，一個(gè)為4
/*alert(star)*/
$(this).find('.u-grade div').removeClass('light'); //移除所有class的 light
$(this).find('.u-grade div').each(function(i,ele){ //ele當(dāng)前的元素， i當(dāng)前元素的索引
if(i<star){ 
/*alert(i);*/ 
/*alert(ele);*/ 
$(ele).addClass('light'); 
}
});
});

上面的代碼比較簡(jiǎn)單，首先遍歷，遍歷找到.u-grade下面的div，也就是u-grada_item,

找到它之后把它所有的light移除掉（light是css中點(diǎn)亮星星的class）,而后把u-grada_item進(jìn)行遍歷，star已經(jīng)取得了data值，根據(jù)i<star進(jìn)行判斷

從而顯示星星亮度的個(gè)數(shù),也就是上面第一張圖一個(gè)亮五顆星一個(gè)亮四顆。

4.1：至此我們已經(jīng)完成了后端賦值，前端表現(xiàn)效果這一塊了。此時(shí)還差兩塊，

一塊是用戶點(diǎn)擊產(chǎn)生效果這一塊，另一塊是把用戶點(diǎn)擊當(dāng)前星星的那個(gè)數(shù)值賦值在data上（讓后端取值保存，重新賦值展現(xiàn)）

4.2：下面來(lái)做用戶點(diǎn)擊表現(xiàn)效果這一塊

$(function(){
$.setGrade = function($ele,index){
var $item = $ele.find(".u-grade_item");
$item.removeClass("light"); 
$item.slice(0,index+1).addClass("light"); 
/*alert(index+1);*/
};
　　　　(function(){
　　var $item = $(".u-grade .u-grade_item"); 
　　$item.click(function(){
　　var $this = $(this); /*定義一個(gè)變量保存當(dāng)前的$item對(duì)象*/
　　var index = $this.parent(".u-grade").children(".u-grade_item").index($this); 
　　//通過(guò)index()返回指定元素的index位置，也就是自己所認(rèn)為的當(dāng)前元素的索引值
　　/*alert(index);*/
　　$.setGrade($this.parent(),index); //jQuery下的靜態(tài)方法
　　})
})();
}); 

a:代碼實(shí)現(xiàn)就不一一說(shuō)了，可以看注釋，就這樣，就完成用戶點(diǎn)擊產(chǎn)生效果這一塊，下面只差最后一塊了，把用戶點(diǎn)擊的這個(gè)星星的數(shù)值賦值在data上，

明確這個(gè)就很好辦了：

(function(){
var $item = $(".u-grade .u-grade_item"); 
$item.click(function(){
var $this = $(this); 
var index = $this.parent(".u-grade").children(".u-grade_item").index($this); 
　　　　　　　　　 var star = $(this).parent(".u-grade").attr('data',index+1);
//把點(diǎn)擊當(dāng)前的那個(gè)元素的索引賦值給data，以可以改變?cè)瓉?lái)data的數(shù)值
$.setGrade($this.parent(),index); //jQuery下的靜態(tài)方法
})
})();

好了，到此本文的全部?jī)?nèi)容就介紹完了，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論