五星评价

最新推荐文章于 2019-06-25 23:38:05 发布

豆奶dudu

最新推荐文章于 2019-06-25 23:38:05 发布

阅读量297

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/qq_36457584/article/details/88885800

web 专栏收录该内容

43 篇文章

订阅专栏

css:

#star li{
background-image: url("../../recouse/images/star.png");
width: 23px;
height: 22px;
display: inline-block;
}
#star li.fullstar{
background-image: url("../../recouse/images/fullstar.png");
width: 23px;
height: 22px;
display: inline-block;
}

html:

<ul id="star" class="star">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

js:

$(document).ready(function () {
        var index = 0;  //点的是第几颗星
        var starNum=0;  //星的数量
        $(".star li").on("click",function () {
                index = $(this).index()+1;
                if(index<=starNum){
                for(var j=0;j<(starNum-index);j++){
                    $(".star li")[index+j].className='';
                }
        }else{
               for(var i=0;i<index;i++){
                   $(".star li")[i].className='fullstar';
               }
        }
        starNum=$(".star").find(".fullstar").length;
    })
})