jQuery模仿淘寶商品評價

　　最近作項目要作個商品評價的功能，我直接就跑到淘寶那裏去研究了，可看着暈暈的，還不知道他是怎麼作的，因而把圖摳了下來，本身寫了一個，接下來就展現一下我是怎麼作的，你們有不一樣的實現方法可要記得分享一下呀。

　　通過研究，我發如今腳本事件上來講，就分三個事件，鼠標移入事件，鼠標離開事件和點擊事件。移入就讓鼠標移入的星星和以前的星星都變色，點擊在移入的基礎上保存了當前點擊的星星位置，離開則恢復到上次點擊的那個星星。從樣式上來講，這些星星能夠共用一個圖片，切換星星時讓圖片的一部分展現出來就能夠了。

　　這裏展現Demo就只搞三個星星了，星星右邊的文字提示也不弄了。這裏用無連接的連接標籤來放星星，使用連接有個好處就是若是之後要在點擊星星時觸發服務器的操做，好比點擊星星直接完成評價操做，就能夠直接用了，再用一個隱藏input來存放最近一次點擊的星星的值：

<div id="rating-star">
    <a href="#">0</a>
    <a href="#">1</a>
    <a href="#">2</a>
</div>

 

　　接着給rating-star和連接一個樣式，切換圖片的關鍵只須要修改background-position就能夠了：

#rating-star {
    margin: 50px;
}

    #rating-star a {
        background: url(commentstar.png) no-repeat 0 -90px;
        display: inline-block;
        height: 23px;
        text-indent: -999em;
        width: 23px;
    }

　　最後就是關鍵的腳本了：

        $('#rating-star').on('click', 'a', function () {
            $('#rating-star').data('star', this.innerHTML);
        }).on('mouseenter', 'a', function () {
            setStar(this);
        }).on('mouseleave', 'a', function () {
            var $r_star = $('#rating-star');
            var level = $r_star.data('star');
            var $stars = $r_star.find('a');
            if (level) {
                setStar($stars[level]);
            } else {
                $stars.css('background-position', '0 -90px');
            }
        });

        function setStar(star) {
            var $this = $(star);
            var level = $this.html();
            var n;
            if (level == '2') {
                n = '0 -30px';
            } else if (level == '1') {
                n = '0 0';
            } else {
                n = '0 -60px';
            }
            $this.prevAll().andSelf().css('background-position', n);
            $this.nextAll().css('background-position', '0 -90px');
　　　　 }

 

　　這裏有必要解釋一下個人思路，能夠看到點擊事件只是給隱藏控件賦值，沒作其餘事，原本點擊事件是要變換圖片的，這事我發現鼠標移入事件已經作了，因此我就再也不重複了，而後你會發現鼠標移入和離開最終都調用了setStar函數，那個方法其實就是把傳入的星星以及他以前的星星改爲相應的圖片，把傳入的星星以後的星星改爲無顏色的星星，其實setStar也能夠原html對象的數字下標，這樣也能夠用jquery的slice來實現。有些同志可能不知道'0 -30px'這些的是幹什麼的，其實'0 0'就是在本來默認的圖片展現，-30px意思就是在y軸上把圖片向上移動30個像素，這樣在連接大小限定爲長寬都爲23px的狀況下，咱們看到的就是好評圖片了，'0 0'對應的就是中評圖片，'0 -60px'對應的就是差評圖片，'0 -90px'對應的就是還沒評價的圖片。把本來的四個圖片合成一張圖片有什麼好處呢，能夠減小請求數，寫代碼也比較方便吧，估計腳本性能也會好點。

　　親自試一試