工作日志之星級評分
今天主要完成了幾件事情：
- 完成了博客標簽的生成與鏈接暇检，并且通過js實現(xiàn)了標簽與文章使用同一個模板的需求产阱，繼續(xù)加油！
- 接到了二手車的修改任務块仆，雖然花了幾乎一天的時間心墅，但是好在在7點半左右完成了，所以心情很好榨乎，因為通過自己的努力，解決了問題瘫筐，對自己的學習和自信是一個很好的促進作用蜜暑。
廢話不多說，開始今天的主題：星級評分
再翻看自己之前寫的代碼的時候策肝，發(fā)現(xiàn)代碼結構臃腫肛捍，而且多處判斷是不對的，所以在調整完css的樣式后開始重寫了星級評分之众；
在制作css部分今天使用了一個非常好用的工具：csssprites,非常好用拙毫，而且方便的css雪碧圖生成工具，省去了我一大把時間棺禾，接著就是關鍵的js部分了缀蹄。
按照正常的星級評分來說需要做到：
- 鼠標劃到某顆星星，則該星星與之前的星星都會變亮膘婶，鼠標移出去恢復默認樣式缺前；
- 點擊某顆星后，該星以及之前的星星會亮悬襟。
難點：
- 星星劃上去后衅码，左右移動的時候，鼠標之前的星星一直亮著不會變化脊岳；
- 點擊星星后逝段，鼠標移出去會觸發(fā)鼠標移出的事件與星星外div移出事件；
- 每次點擊后鼠標滑動離開后之前被點擊到的星星依然亮著割捅；
先放html結構：
<div class="start-item">
<a href="javascript:;"></a><!--
--><a href="javascript:;"></a><!--
--><a href="javascript:;"></a><!--
--><a href="javascript:;"></a><!--
--><a href="javascript:;" class="last-start"></a>
</div>
收獲及總結：
-
設想當鼠標滑到其中一個星星的時候如果往左滑動奶躯，會出現(xiàn)星星亮-滅-亮的過程，導致很不自然的過渡棺牧，開始我是給a標簽加上了
display: inline-block;然后使用padding讓所有星星挨著的巫糙，但是后來發(fā)現(xiàn)變成inline-block后，a標簽之間的空格也會被算上距離颊乘，所有我給a標簽加上了\用來注釋掉之間的距離参淹，從而達到了鼠標劃傷去左右滑動不會閃爍的情況醉锄，其中有一個小插曲：使用setTimeout，通過給鼠標移出的事件加上這個然后在鼠標進入的時候判斷定時器的id是否存在浙值，來取消或者進行加減class恳不。(ps:這種方式也可以用來給resize，scroll事件加上定時多少秒再次調用的功能开呐；)var startStatus;//存儲定時器的id xxx.mouseenter: if startStatus clearTimeout(startStatus) xxx.mouseout: this.removeClass('active') startStatus = setTimeout(function(){ this.prevAll().removeClass('active') },200) 當我點擊的時候我本來是要讓從點擊的星星開始到其之前所有的星星都會亮烟勋，但是當鼠標劃上去的時候又消失的，所有這個糾結了很久筐付，試過好幾種方法,使用過通過off來解綁的卵惦，但是都失敗了，因為貌似綁定的事件對象不同瓦戚，當我用on的時候是給所有的a加上了代理事件沮尿，當我click的時候，點擊的是當前的a標簽较解；我通過xxx.off('.removeStart',this)的方式來進行解綁畜疾，但是還是存在問題，事件要么是給所有的a標簽解綁了還是只是當前的印衔，但是這種走不通啡捶。
最后我通過看了網上的demo清楚了自己對需求理解的不到位，問題的沖突在于點擊后同時觸發(fā)了包裹層的鼠標出事件奸焙。
使用off無法解決后瞎暑，使用了布爾值，但是第二次點擊仍然有問題与帆，最后誤打誤撞的寫下了正確的想法金顿。
其實是這樣的，只需要給鼠標移處事件加上一個判斷鲤桥；
首先如何確定是第二次點擊呢揍拆？所以我設置了三個全局變量：
var chose=false, //控制鼠標離開事件執(zhí)行的函數(shù)
startIndex, //存儲點擊后的index
$startP; //存儲星星父級jquery對象
其中chose就是用來開關的，
我在點擊的時候存了startIndex和$startP兩個變量茶凳；一個當前點擊星星的序列嫂拴，另一個是當前星星包裹層的jquery對象；
然后當我鼠標移出的時候贮喧，我判斷chose是否為true筒狠，如果是的話說明已經點擊了星星，那么箱沦，鼠標移出后辩恼，之前點擊到的星星依舊會亮著，然后進而判斷startIndex是否存在，如果存著說明已經點過了灶伊，然后亮起來星星疆前，如果沒有，則鼠標移出后刪除所有a標簽的class聘萨；
最后有一個問題是竹椒，什么時候重置那三個屬性？
后來我在click事件里面加了一個判斷米辐，是否是第一次點擊胸完，條件是startIndex，如果startIndex存在的話說明已經點過一次了翘贮，重置startIndex和$startP赊窥，如果第一次點擊的話，將chose默認為false狸页，然后在點擊下一題那里也是通過這個來判斷的誓琼。
function holdStart(){
$startP.children().each(function(index,elem){
if(index < startIndex){
$(elem).addClass('active');
}else{
$(elem).removeClass('active');
}
})
}
$dialog.on('click','.easy-test .container .step-base .start-item a',function(){
if(!startIndex){
chose = !chose;
}
$startP = '';
startIndex = '';
var $tips = $('.easy-test .container .tips');
$tips.hide();
flag = true;
var _this = $(this);
$startP = $(this).parent();
startIndex = _this.index()+1;
_this.prevAll().addClass('active');
_this.addClass('active');
console.log(chose);
});
其實通過寫這篇文章主要是想要理清一下去解決一個問題的思路：首先是需要描述清楚需要達到的效果，然后分效果進行完成肴捉，說起來自己的邏輯思維能力太差勁了，有時候轉不過彎來叔收，做事太死板齿穗。為什么沒有想到那種解決方案呢？
最關鍵的思路是在鼠標離開的時候進行判斷饺律。
GitHub Demo地址：
https://github.com/CodeDreamfy/CodeDemo/tree/development/start-pingfen
