回到顶部
我的头像

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");
                            }
                        });
                    });
                

2016.10.14

© RedSpite | 蜀ICP备16004270号