JS實作星級評價

說明：

　　本方法采用了Jquery庫，暫時檢測相容IE8版本。本示例的2種顔色的星星都是放入了一張png圖檔當中，當然還有其他的一些實作思路。本示例展示的情況是目前頁面隻有一個星級評價的情況。

思路：

　　通過對星級顯示元素的，mouseenter,mouseout,click 三個事件的監聽，進而星星顯示的個數。其中我用了2個變量（temp_value,choice_value）來存放目前標明星級的值和目前臨時的星級值；

　　　temp_value : 臨時的星級值；
choice_value : 選擇的星級值；
　　　mouseenter : 滑鼠移入，擷取目前所在的星星級别賦予temp_value，調整目前星星的圖檔顔色；
　　 mouseout : 滑鼠移除，通過對比choice_value值，重新調整星星圖檔顔色；
click : 滑鼠單擊後，擷取目前的星級值，指派給choice_value;（注意在click前已經進行過mouseenter事件了，click後進行了mouseout事件了）
當完成標明值後，在需要送出評價值的時候，可以通過JS去擷取變量choice_value的值；

HTML結構代碼：

<h1>評價：</h1>
    <ul id="star">
        <li title="很差" id="star1" star="1"></li>
        <li title="差" id="star2" star="2"></li>    
        <li title="一般" id="star3" star="3"></li>
        <li title="好" id="star4" star="4"></li>
        <li title="很好" id="star5" star="5"></li>
    </ul>

注：如果頁面中不止一個星級評價，也就是出現多行的情況，這個時候隻需要對Dom中li的id進行一些改造，加上動态的下标，進而區分不同的元素。另外有個點就是，我把標明的星級值放入的是JS變量中去了，多個評價值的情況下，建議可以在Dom中加上隐藏表單域去存放標明的目前星級值。

JS實作代碼：

<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            var _temp_value = 0,//滑鼠hover時的等級value
                choiceValue = 0;//預設標明的等級值為1

            //滑鼠移入的時候
            $("#star li").mouseenter(function() {
                //擷取目前的星級
                _temp_value = new Number($(this).attr("star"));
                showStar();

            //滑鼠移入的時候
            }).mouseout(function(){
                hideStar();

            //滑鼠移入的時候
            }).click(function(){
                //單擊時，設定目前的標明值
                choiceValue = _temp_value;
　　　　　　　　hideSatr();　　
            });

            //星級顯示
            function showStar() {
                for (var i = 1 ; i < _temp_value+1; ++i) {
                    $("#star"+i).addClass("choice");
                }
            }

            function hideStar() {
                for (var i = 5 ; i > choiceValue; --i) {
                    $("#star"+i).removeClass("choice");
                }
            }
        });
    </script>

如有問題，請聯系我！這裡是Demo位址：http://xiaoweijs.duapp.com/demo/star-level/index.html

作者：Ziv小威

出處：http://imziv.com/

關于作者：專注于Java技術的程式員一枚，此外對JS開發保持着較高的興趣。愛好音樂，閱讀，FM等等。

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。

如有問題，可以郵件：[email protected]

微網誌：Ziv小威