Bootstrap图标实现移动端的星星评分功能

最新推荐文章于 2024-05-30 09:57:09 发布

无涯大者

最新推荐文章于 2024-05-30 09:57:09 发布

阅读量8.7k

点赞数 1

分类专栏： Bootstrap JQuery 文章标签： bootstrap 移动 Jquery

本文链接：https://blog.csdn.net/fengqingtao2008/article/details/51286770

版权

JQuery 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Bootstrap

3 篇文章 0 订阅

订阅专栏

利用Bootstrap图标实现星星评分功能：

<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>评星</title>
        <link href="Styles/bootstrap-cerulean.min.css" rel="stylesheet" type="text/css" />
   
    <style>
        .pf .glyphicon {
            color: orange;
            user-select: none;
            padding: 0px 10px;
        }

        .pf li {
            padding: 10px 0px;
            font-size:16px;
        }
    </style>
</head>
<body style="background-color:#FFFFFF;">
    <div class="pblockm" id="d1406010801010000002" data-rh-caption="块样式">
        <br><br><br>
        <ul class="pf">
            <li data-rh-score="0">
                <span class="title" id="star1">总体</span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="tip"></span>
            </li>
            <li data-rh-score="0">
                <span class="title" id="star2">菜品</span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="tip"></span>
            </li>
            <li data-rh-score="0">
                <span class="title" id="star3">服务</span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="glyphicon glyphicon-star-empty"></span>
                <span class="tip"></span>
            </li>
        </ul>
       
    </div>
    <button type="button" name="btnSubmit" class="btnSubmit" id="btnSubmit">提交</button>
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

    <script>
    var tip=['','1分','2分','3分','4分','5分'];
    $('.pf').on('mousedown','.glyphicon',function(){
        if($(this).hasClass('glyphicon-star')){
            var score = 0;
            $(this).parent().attr('data-rh-score' ,score);
            $(this).addClass('glyphicon-star-empty').removeClass('glyphicon-star').siblings('.glyphicon').addClass('glyphicon-star-empty').removeClass('glyphicon-star');
            $(this).nextAll('.tip').text(tip[0]);
        }else{
            var score = $(this).index();
            $(this).parent().attr('data-rh-score' ,score);
            $(this).addClass('glyphicon-star').removeClass('glyphicon-star-empty').prevAll('.glyphicon').addClass('glyphicon-star').removeClass('glyphicon-star-empty');
            $(this).nextAll('.tip').text(tip[score]);
        }
    });
        // var fs1 = $('#star1').nextAll('.rater-star-result').text();

    </script>
</body>
</html>

效果：

源码下载路径：

Bootstrap图标实现移动端的星星评分功能

无涯大者

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
Bootstrap图标实现移动端的星星评分功能

利用Bootstrap图标实现星星评分功能：评星 .pf .glyphicon { color: orange; user-select: none; padding: 0px 10px; }
复制链接

扫一扫

专栏目录