RedSpite » 星星打分插件简易版

简单的五星评价插件

简历

我们在完成交易以后，通常可以给我们所享受的服务或者商品作出评价，做评论的时候需要用到的星星打分，这个插件就是为评价而做的。如果需要给后台返值的话，返回 $(".star_score span.select").size()的值即可。

Html:

Css:

                    .star_score span{
                        display: inline-block;
                        width: 20px;
                        height: 20px;
                        background: url(../img/star-off.png) no-repeat;
                        background-size: 100%;
                        cursor: pointer;
                    }
                    .star_score span.active, .star_score span.select{
                        background: url(../img/star-on.png) no-repeat;
                        background-size: 100%;
                    }

Js:

                    $(function(){
                        var className= $(".star_score");
                        //生成5个星星
                        for(var i=0;i<5;i++){
                            var _html = '';
                            className.append(_html);
                        }
                        //鼠标滑过，星星背景图片改成选中图片
                        $(".star_score span").hover(function(){
                            var index = $(this).index();
                            for(var i = 0; i <=index; i++){
                                $(this).parent().find("span").eq(i).addClass("active");
                            }
                        //鼠标移除去掉激活效果
                        },function(){
                            $(this).parent().find("span").removeClass("active");
                        });
                        //星星点击，这颗星星之前的所有星星加上选中效果
                        $(".star_score span").click(function(){
                            $(this).parent().find("span").removeClass("select");
                            var index = $(this).index();
                            for(var i = 0; i <=index; i++){
                                $(this).parent().find("span").eq(i).addClass("select");
                            }
                        });
                    });

2019.10.14