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'對應的就是還沒評價的圖片。把原本的四個圖片合成一張圖片有什么好處呢，可以減少請求數，寫代碼也比較方便吧，估計腳本性能也會好點。

　　親自試一試