码迷,mamicode.com
首页 > 其他好文 > 详细

星级评分实现

时间:2019-11-11 00:07:15      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:初始化   list   cti   click   src   doc   选择   ons   index   

效果图:

技术图片

图片:

技术图片

完整代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>星级评分</title>
        <style>
            *{
                padding:0;
                margin: 0;
            }
            .rating{
                width:140px;
                height: 26px;
                margin:100px auto;
            }
            .rating-item{
                float:left;
                width:28px;
                height: 26px;
                background:url(img/star.png) no-repeat ;
                cursor:pointer;
                list-style: none;
            }
        </style>
    </head>
    <body>
        <ul class="rating" id="rating">
            <li class="rating-item" title="很不好"></li>
            <li class="rating-item" title="不好"></li>
            <li class="rating-item" title="一般"></li>
            <li class="rating-item" title="好"></li>
            <li class="rating-item" title="很好"></li>
        </ul>
        <script src="js/jquery.min.js" ></script>
        <script>
            let num=0;
            let $rating=$(#rating);
            let $item=$rating.find(.rating-item);
            let lightOn=function(num){
                $item.each(function(index){
                    if(index<num){
                        $(this).css(background-position,0 -26px);
                    }
                    else{
                        $(this).css(background-position,0 0);
                    }
                })
            }
            //初始化
            lightOn(num);
            //事件绑定
            $rating.on(mouseover,.rating-item,function(){  //事件委托
                lightOn($(this).index()+1);
            }).on(click,.rating-item,function(){
                num=$(this).index()+1;
                let info=$(this).attr("title");
                console.log(`您选择了“${info}”`);
            }).on(mouseout,function(){
                lightOn(num);
            })
            
        </script>
    </body>
</html>

 

 

星级评分实现

标签:初始化   list   cti   click   src   doc   选择   ons   index   

原文地址:https://www.cnblogs.com/liangtao999/p/11832435.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!