类似淘宝页面的星星评价可复用

最新推荐文章于 2022-06-14 21:14:44 发布

jiubai_9000

最新推荐文章于 2022-06-14 21:14:44 发布

阅读量397

点赞数

分类专栏： js，jquery 文章标签：星星评价效果

本文链接：https://blog.csdn.net/jiubai_9000/article/details/77528873

版权

js，jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
    <meta charset="utf-8">
    <style>
        #serviceBox {
            width: 490px;
            overflow: hidden;
        }

        #professionalBox {
            width: 490px;
            overflow: hidden;
        }

        .commentStar {
            width: 330px;
        }

        #serviceBox span, #professionalBox span {
            display: block;
            width: 80px;
            height: 30px;
            line-height: 30px;
            float: left;
        }

        #serviceBox .message, #professionalBox .message {
            width: 80px;
            height: 30px;
            border-radius: 5px;
            outline: none;
            border: none;
            color: #000;
            background: #fff;
            float: right;
        }

        #comment_form .commentStar li {
            list-style: none;
            float: left;
            overflow: hidden;
            font-size: 20px;
            cursor: pointer;
            text-decoration: none;
            color: #000;
        }

        #submint_btn {
            list-style: none;
        }
    </style>
    <!--<link rel="stylesheet" href="styles/web/model2.min.css">-->
    <script type="text/javascript" src="scripts/web/jquery2.min.js"></script>
    <script src="scripts/web/jQuery.Form.js"></script>
</head>
<body>
<div id="c-comments">
    <div class="m-mainTitleBox">
        评价
        <a class="m-moreBtn" >更多&gt;&gt;</a>
    </div>
    <div class="c-content">
        <div class="c-content">
            <form id="comment_form">
                <div id="serviceBox">
                    <span>服务态度</span>
                    <div id="service_star" class="commentStar">
                        <li>☆</li>
                        <li>☆</li>
                        <li>☆</li>
                        <li>☆</li>
                        <li>☆</li>
                    </div>
                    <input type="text" value="3分" name="service_score" class="message">
                </div>
                <div id="professionalBox">
                    <span>专业能力</span>
                    <div id="professional_star" class="commentStar">
                        <li>☆</li>
                        <li>☆</li>
                        <li>☆</li>
                        <li>☆</li>
                        <li>☆</li>
                    </div>
                    <input type="text" value="3分" name="professional_score" class="message">
                </div>
                <div id="comment_words">
                    <textarea cols="50" rows="10" name="comment" placeholder="请输入文字评价"></textarea>
                </div>
                <div id="submit">
                    <li id="submint_btn">
                        <input type="button" value="提交">
                    </li>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="JQObjs"></div>
</body>
<script type="text/javascript">

//参数分别是有星星的div的id，默认分数，临时存储分数，选中的css样式，选中的html内容，默认的css样式，默认的html内容
    showStars($("#service_star"),2,2,{"color": "#ff7e00"},"★",{"color":"#000"},"☆");
    showStars($("#professional_star"),2,2,{"color": "#ff7e00"},"★",{"color":"#000"},"☆")
    function showStars(dom,default_num,temp_num,sel_css,sel_html,del_css,del_html){

//星星样式初始化
        function starInit(default_num){
            dom.children("li").eq(default_num).css(sel_css).html(sel_html).prevAll().css(sel_css).html(sel_html).end().nextAll().css(del_css).html( del_html);
        }
        starInit(default_num)

//鼠标划入，当前这个li及前面的li做选中样式和html内容
        dom.on("mouseenter", "li", function () {
            $(this).css(sel_css).html(sel_html).prevAll().css(sel_css).html(sel_html).end().nextAll().css(del_css).html( del_html);
//鼠标划入时做分数显示

	    var ind = $(this).index();
            $(this).parent().siblings(".message").val((ind + 1)+"分");
        }).on("click", "li", function () {

//鼠标点击时，标记被点击的li 加上class "clicked" 并且把相邻的别的点击事件加上的class去掉
            $(this).addClass('clicked').siblings().removeClass('clicked');

//临时分数的存储，便于下面鼠标离开显示鼠标点击的状态

            temp_num = $(this).index();
            $(this).parent().siblings(".message").val((temp_num + 1)+"分");
        }).on("mouseleave", function () {

//如果用户没有选择只是鼠标划入划出，那么还是初始化星星样式
            starInit(default_num)

//如果有点击会直接根据点击时加的"clicked"来作用样式
            $(".clicked").css(sel_css).html(sel_html).prevAll().css(sel_css).html(sel_html).end().nextAll().css(del_css).html( del_html);

//鼠标划出得显示存储的点击的临时分数
            $(this).siblings(".message").val((temp_num + 1)+"分")
        });
    }

</script>
</html>

jiubai_9000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录