＜笔记＞使用jquery-star-rating进行评分

冈斯特

于 2020-08-01 10:07:23 发布

阅读量428

点赞数

分类专栏：笔记文章标签： html js

本文链接：https://blog.csdn.net/liyaohuii/article/details/107726621

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

插件：https://github.com/zhanguangcheng/jquery-star-rating
demo中有具体使用教程

<!doctype html>

<html xmlns:javascript="http://www.w3.org/1999/xhtml">
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="css/weui.css"/>
<link rel="stylesheet" href="css/weuix.css"/>

<!--微信UI-->
<script src="/js/zepto.min.js"></script>
<script src="/js/zepto.weui.js"></script>
<script src="/js/controller/creatDineOrderController.js"></script>

<link rel="stylesheet" href="/fonts/iconfont.css"/>
<link rel="stylesheet" href="/css/font.css"/>
<link rel="stylesheet" href="/css/weui.min.css"/>
<link rel="stylesheet" href="/css/jquery-weui.min.css"/>
<link rel="stylesheet" href="/css/mui.css"/>
<link rel="stylesheet" href="/css/pages/creatclass.css"/>
</head>
<body ontouchstart>
<header>
    <div class="titlebar reverse">
        <a href="javascript:back()">
            <i class="iconfont">&#xe63f;</i>
        </a>
        <h1>订单评价</h1>
        <a href="login.html" class="app">
            <i class="iconfont">&#xe60e;</i>
        </a>
    </div>
</header>
</br>
</br>
</br>


用餐时间:<span id="date" th:text="${date}"></span></br>
用餐时段:<span id="diningTime" th:text="${diningTime}"></span>
<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead>
        <tr>
            <th>菜品名称</th>
            <th>评分</th>

        </tr>
        </thead>
        <tbody>
        <tr th:each="food:${foodList}">

            <td  th:text="${food}"></td>
            <td>
                <div class="demo1">
                    <div>
                        <div class="star"></div>
                        <span name="score">0分</span>
                    </div>
                    <!-- <button οnclick="jump()">提交</button> -->
                    <a name="url"
                       th:href="@{'/evaluation?food='+${food}+'&diningtime='+${diningTime}+'&date='+${date}+'&orderId='+${orderId} }"></a>
                </div>
                <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
                <script src="/js/src/jquery-star-rating.js"></script>
                <script>

                    $('.demo1 .star').starRating({
                        starNumber: 5,
                        step: 1,
                        eventHover: function (event, star) {
                            switch (star) {
                                case 1:
                                    $(this).next('span').text(star + '分,没法吃');
                                    break;
                                case 2:
                                    $(this).next('span').text(star + '分,凑合吃');
                                    break;
                                case 3:
                                    $(this).next('span').text(star + '分,中等');
                                    break;
                                case 4:
                                    $(this).next('span').text(star + '分,可口');
                                    break;
                                case 5:
                                    $(this).next('span').text(star + '分,很不错');
                                    break;
                            }
                        },
                        eventOut: function (event, star) {
                            $(this).next('span').text(star + '分');
                        },

                    });
                </script>

            </td>
        </tr>
        </tbody>
    </table>
    <center><button id="button" onclick="jump()"  class="weui-btn weui-btn_primary weui-btn_mini">提交</button></center>
    <center><h4 style="color: #ff5951">本次评分为匿名评分 请理性评分</h4></center>
</div>


<script>
    function jump() {
        var scoreS = document.getElementsByName("score");
        var urlS=document.getElementsByName("url");
        for (i = 0; i < scoreS.length; i++) {
            var score = parseInt(scoreS[i].innerText.substring(0,1));
            if(score==0){
                alert("不允许给出0分");
                return;
            }
            var oldUrl = urlS[i].getAttribute("href");
            urlS[i].setAttribute("href",oldUrl+"&score=" + score);//拼接
            $.get(urlS[i].getAttribute("href"));
        }
        document.getElementById("button").setAttribute("disabled","disabled");
        document.getElementById("button").setAttribute("class","weui-btn weui-btn_primary weui-btn_disabled weui-btn_mini");
        alert("提交成功");
        location.href="index.html";

    }
</script>

</body>

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    body {
        color: #666;
        font: 12px/1.5 Arial;
    }

    /* star */
    #star {
        position: relative;
        width: 600px;
        margin: 20px auto;
        height: 24px;
    }

    #star ul, #star span {
        float: left;
        display: inline;
        height: 19px;
        line-height: 19px;
    }

    #star ul {
        margin: 0 10px;
    }

    #star li {
        float: left;
        width: 24px;
        cursor: pointer;
        text-indent: -9999px;
        background: url(images/star.png) no-repeat;
    }

    #star strong {
        color: #f60;
        padding-left: 10px;
    }

    #star li.on {
        background-position: 0 -28px;
    }

    #star p {
        position: absolute;
        top: 20px;
        width: 159px;
        height: 60px;
        display: none;
        background: url(images/icon.gif) no-repeat;
        padding: 7px 10px 0;
    }

    #star p em {
        color: #f60;
        display: block;
        font-style: normal;
    }
</style>
</html>