原生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)

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