评论星星的效果

在网上参考别人做好的，自己再修改了一些。做成自己想要的效果。

1、首先需要字体图标。需要jQuery插件。

下面是我的代码：

CSS：

.pinglun{
    height: 30px;
}
.icon{
    fill: currentColor;
    /*color: rgb(252, 172, 0);*/
    cursor: pointer;
}
.pinglunfont{
     30px;
    height: 30px;
    display: inline-block;
}

HTML：

<div class="pinglun">
            <input type="hidden" class="pinglunnum" value="0">
            <svg class="icon pinglunfont" aria-hidden="true">
                <use xlink:href="#icon-huisepinglun" class="xing"></use>
            </svg>
            <svg class="icon pinglunfont" aria-hidden="true">
                <use xlink:href="#icon-huisepinglun" class="xing"></use>
            </svg>
            <svg class="icon pinglunfont" aria-hidden="true">
                <use xlink:href="#icon-huisepinglun" class="xing"></use>
            </svg>
            <svg class="icon pinglunfont" aria-hidden="true">
                <use xlink:href="#icon-huisepinglun" class="xing"></use>
            </svg>
            <svg class="icon pinglunfont" aria-hidden="true">
                <use xlink:href="#icon-huisepinglun" class="xing"></use>
            </svg>
        </div>

JavaScript：

var num  = finalnum = 0;
        var tempnum =5;
        var lis = $(".pinglun .icon");
        //num:传入点亮星星的个数
        //finalnum:最终点亮星星的个数
        //tempnum:一个中间值
        function fnShow(num) {
            finalnum = num || tempnum; 
            for(var i = 0; i < lis.length; i++) {
                lis.eq(i).attr("color",i < finalnum ? "rgb(252, 172, 0)" : "#bbb");
            }
        }
        for(var i = 1; i <= lis.length; i++) {
            lis.eq(i-1).index(i);
            lis.mouseover(function(){
                fnShow($(this).index()); 
            })
            lis.mouseout(function(){
                fnShow(0); 
            })
            lis.click(function(){
                tempnum = $(this).index();
            }) 
        }

        //初始状态5颗星
        fnShow(5);

另外一种方式，用css控制星星的数量和颜色。代码如下：
（1）html

<div class="all_star">
    <i class="fa"></i>
    <i class="fa"></i>
    <i class="fa"></i>
    <i class="fa"></i>
    <i class="fa"></i>
</div>
 <input class="none" id="num" type="hidden"/>

（2）js

$(function(){
    $(".fa").click(function(){
        var num=$(this).index()+1;
        $("#num").val(num);
    })
    $(".fa").mouseover(function(){
        $(this).addClass("oarage");
        $(this).prevAll().addClass("oarage");
        $(this).nextAll().removeClass("oarage");
    })
    $(".fa").mouseout(function(){
        var num=$("#num").val();
        if(num==null || num==""){
            $(".fa").removeClass("oarage");
        }else{
            $(".fa").removeClass("oarage");
            $(".fa:lt("+num+")").addClass("oarage");
            }
        })
})

做出来的效果：