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