五星好评插件 js + html +css

最新推荐文章于 2024-08-22 14:38:51 发布

JXL666888

最新推荐文章于 2024-08-22 14:38:51 发布

阅读量1.2k

点赞数

分类专栏： JavaScript html+css

本文链接：https://blog.csdn.net/JXL9910/article/details/82716189

版权

JavaScript 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

html+css

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .box{
            margin: 20px auto;
            height: 50px;
            width: 300px;
        }
        .box .comment{
            font-size: 30px;
            color: orange;
        }

        .comment li{
            float: left;
            cursor: pointer;
        }

        ul{
            list-style: none;
        }

    </style>
</head>
<body>
    <div class="box">
        <ul class="comment" name="xingji">
            <li value="1">☆</li>
            <li value="2">☆</li>
            <li value="3">☆</li>
            <li value="4">☆</li>
            <li value="5">☆</li>
        </ul>
    <input type="text" value="" id="aaa">
    </div>
</body>
</html>
<script src="jquery.min.js"></script>
<script>
    $(function(){
        var wjx_none = '☆'; // 空心五角星
        var wjx_sel = '★'; // 实心五角星

        //鼠标移进变实星
        $(".comment li").on("mouseover",function(){
            $(this).text(wjx_sel).prevAll("li").
            text(wjx_sel).end().nextAll().text(wjx_none);
            $("#aaa").val($(this).val());

        });

        //鼠标移出变空星
        $(".comment li").on("mouseout",function(){
           if($("li.current").length === 0){
                $(".comment li").text(wjx_none);
           }else{
               $("li .current").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
           }
        });

        //鼠标点击保持当前状态
        $(".comment li").on("click",function(){
            $(this).attr("class","current").siblings().removeClass("current");

            $("#aaa").val($(this).val());
            // alert($(this).val());
        });


    });
</script>