五星好评插件 js + html +css

<!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>
记得引入jquery哦~~~
五星好评插件 js + html +css

猜你喜欢
