原生javascript实现星级评价功能

因为用到自定义字体，我首先到阿里巴巴矢量图标库下载了自己喜欢的星星样式。需要一个空心星星，一个实心星星。

---

按照使用方法，如下图所示引入这些文件。

---

接下来是布局，三行评价，都是一样的样式，那就用一个无序列表吧！

    <ul>
        <li class="goods">
            宝贝与描述相符：
            <i class="star"></i>
            <i class="star"></i>
            <i class="star"></i>
            <i class="star"></i>
            <i class="star"></i>
            <em></em>
        </li>
        <li class="att">
            卖家的服务态度：
            <i class="star"></i>
            <i class="star"></i>
            <i class="star"></i>
            <i class="star"></i>
            <i class="star"></i>
            <em></em>
        </li>
        <li class="trans">
            物流服务的质量：
            <i class="star"></i>
            <i class="star"></i>
            <i class="star"></i>
            <i class="star"></i>
            <i class="star"></i>
            <em></em>
        </li>
    </ul>

给star类加了一个伪类用来显示星星图标：

        .star:after{
            font-family: 'Hui-iconfont';
            font-size:25px;
            font-style:normal;
            content:"\e702";
            vertical-align:middle;/*使文字和图标对齐*/
            color:#eee;
        }
       下面这是实心星星的：
        .current:after{
            font-family: 'Hui-iconfont';
            font-size:25px;
            font-style:normal;
            content:"\e6ff";
            vertical-align:middle;
        }

布局完是这样的：

下面开始写js.

    function comment(liName,content){
        var li=document.getElementsByClassName(liName)[0];
        var star=li.getElementsByTagName("i");
        var currentClick=0,num=0;
        for(var i=1;i<=star.length;i++){
            star[i-1].index=i;
            star[i-1].onmouseover=function(){
                show(this.index);
            }
            star[i-1].onmouseout=function(){
            //选择i=1；就是为了把0让给这一步，鼠标移开不显示实星星。
                show(0);
            }
            star[i-1].onclick=function(){
                currentClick=this.index;
                show(currentClick);
            }
        }
        function show(index){
        //当点击后，又经过又离开，传递参数0；但短路语句直接返回currentClick,以此保证点击之后再经过也不改变。
            num=index||currentClick;
            for(var j=0;j<star.length;j++){
                star[j].className=(j<num)?'current':'star';
                if(num==1||num==2){
                    star[j].style.color="#666"
                } else if(num==3||num==4){
                    star[j].style.color="orange";
                } else{
                    star[j].style.color="red";
                }
            }
        li.getElementsByTagName("em")[0].innerText=num>0?content[num-1]:"";
        }
    }
    var arr=["一分 失望","两分 不满","三分 一般","四分 满意","五分 惊喜"];
    comment("goods",arr);
    comment("att",arr);
    comment("trans",arr)

就可以实现基本的效果啦！