工作日志之星級評分
今天主要完成了幾件事情：
- 完成了博客標簽的生成與鏈接，并且通過js實現(xiàn)了標簽與文章使用同一個模板的需求，繼續(xù)加油！
- 接到了二手車的修改任務，雖然花了幾乎一天的時間，但是好在在7點半左右完成了，所以心情很好，因為通過自己的努力，解決了問題，對自己的學習和自信是一個很好的促進作用。
廢話不多說，開始今天的主題：星級評分
再翻看自己之前寫的代碼的時候，發(fā)現(xiàn)代碼結(jié)構(gòu)臃腫，而且多處判斷是不對的，所以在調(diào)整完css的樣式后開始重寫了星級評分；
在制作css部分今天使用了一個非常好用的工具：csssprites,非常好用，而且方便的css雪碧圖生成工具，省去了我一大把時間，接著就是關(guān)鍵的js部分了。
按照正常的星級評分來說需要做到：
- 鼠標劃到某顆星星，則該星星與之前的星星都會變亮，鼠標移出去恢復默認樣式；
- 點擊某顆星后，該星以及之前的星星會亮。
難點：
- 星星劃上去后，左右移動的時候，鼠標之前的星星一直亮著不會變化；
- 點擊星星后，鼠標移出去會觸發(fā)鼠標移出的事件與星星外div移出事件；
- 每次點擊后鼠標滑動離開后之前被點擊到的星星依然亮著；
先放html結(jié)構(gòu)：
<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>
收獲及總結(jié)：
-
設(shè)想當鼠標滑到其中一個星星的時候如果往左滑動，會出現(xiàn)星星亮-滅-亮的過程，導致很不自然的過渡，開始我是給a標簽加上了
display: inline-block;然后使用padding讓所有星星挨著的，但是后來發(fā)現(xiàn)變成inline-block后，a標簽之間的空格也會被算上距離，所有我給a標簽加上了\用來注釋掉之間的距離，從而達到了鼠標劃傷去左右滑動不會閃爍的情況，其中有一個小插曲：使用setTimeout，通過給鼠標移出的事件加上這個然后在鼠標進入的時候判斷定時器的id是否存在，來取消或者進行加減class。(ps:這種方式也可以用來給resize，scroll事件加上定時多少秒再次調(diào)用的功能；)var startStatus;//存儲定時器的id xxx.mouseenter: if startStatus clearTimeout(startStatus) xxx.mouseout: this.removeClass('active') startStatus = setTimeout(function(){ this.prevAll().removeClass('active') },200) 當我點擊的時候我本來是要讓從點擊的星星開始到其之前所有的星星都會亮，但是當鼠標劃上去的時候又消失的，所有這個糾結(jié)了很久，試過好幾種方法,使用過通過off來解綁的，但是都失敗了，因為貌似綁定的事件對象不同，當我用on的時候是給所有的a加上了代理事件，當我click的時候，點擊的是當前的a標簽；我通過xxx.off('.removeStart',this)的方式來進行解綁，但是還是存在問題，事件要么是給所有的a標簽解綁了還是只是當前的，但是這種走不通。
最后我通過看了網(wǎng)上的demo清楚了自己對需求理解的不到位，問題的沖突在于點擊后同時觸發(fā)了包裹層的鼠標出事件。
使用off無法解決后，使用了布爾值，但是第二次點擊仍然有問題，最后誤打誤撞的寫下了正確的想法。
其實是這樣的，只需要給鼠標移處事件加上一個判斷；
首先如何確定是第二次點擊呢？所以我設(shè)置了三個全局變量：
var chose=false, //控制鼠標離開事件執(zhí)行的函數(shù)
startIndex, //存儲點擊后的index
$startP; //存儲星星父級jquery對象
其中chose就是用來開關(guān)的，
我在點擊的時候存了startIndex和$startP兩個變量；一個當前點擊星星的序列，另一個是當前星星包裹層的jquery對象；
然后當我鼠標移出的時候，我判斷chose是否為true，如果是的話說明已經(jīng)點擊了星星，那么，鼠標移出后，之前點擊到的星星依舊會亮著，然后進而判斷startIndex是否存在，如果存著說明已經(jīng)點過了，然后亮起來星星，如果沒有，則鼠標移出后刪除所有a標簽的class；
最后有一個問題是，什么時候重置那三個屬性？
后來我在click事件里面加了一個判斷，是否是第一次點擊，條件是startIndex，如果startIndex存在的話說明已經(jīng)點過一次了，重置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);
});
其實通過寫這篇文章主要是想要理清一下去解決一個問題的思路：首先是需要描述清楚需要達到的效果，然后分效果進行完成，說起來自己的邏輯思維能力太差勁了，有時候轉(zhuǎn)不過彎來，做事太死板。為什么沒有想到那種解決方案呢？
最關(guān)鍵的思路是在鼠標離開的時候進行判斷。
GitHub Demo地址：
https://github.com/CodeDreamfy/CodeDemo/tree/development/start-pingfen
