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