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

作者：菜鸟追梦旅行 | 2024-02-16 11:26:28

踩

bootstrap-icons 星星

利用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图标实现移动端的星星评分功能

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/92704