评分（可用于多个评分）

最新推荐文章于 2024-07-25 09:24:40 发布

weixin_30763397

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量151

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dflxm/p/7866166.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <style type="text/css">
            *{margin: 0; padding: 0; list-style: none;}
            .pingf{overflow: hidden; height: 50px;}
            .pingf ul li{float: left; width: 20px; height: 20px; background: #ccc; margin: 5px;}
        </style>
        <div id="pingf" class="pingf">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div id="pingf2" class="pingf">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <script type="text/javascript">
    var rating = (function(){
            function lightOn($light,num){
                    $light.each(function(index){
                        if (index < num) {
                            $(this).css('background','red')
                        } else{
                            $(this).css('background','#ccc')
                        }
                    });
                }
            var init = function(el,num){
                var fu = $(el);
                var $light = fu.find('li')
                lightOn($light,num);
                fu.on('mouseover','li',function(){
                    lightOn($light,$(this).index()+1);
                }).on('click','li',function(){
                    num = $(this).index()+1;
                }).on('mouseout','li',function(){
                    lightOn($light,num);
                })
            }
            return{
                init:init
            };
})();
        rating.init('#pingf',2)
        rating.init('#pingf2',3)
        </script>
    </body>
</html>

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/dflxm/p/7866166.html

weixin_30763397

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
评分（可用于多个评分）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascrip...
复制链接

扫一扫