五星好评插件 js + html +css

最新推荐文章于 2022-11-16 17:57:04 发布

JXL666888

最新推荐文章于 2022-11-16 17:57:04 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript html+css

本文链接：https://blog.youkuaiyun.com/JXL9910/article/details/82716189

JavaScript 同时被 2 个专栏收录

35 篇文章

订阅专栏

html+css

12 篇文章

订阅专栏

本文详细介绍了一种使用HTML和jQuery实现的动态五星级评分系统，通过简单的CSS样式和JavaScript交互，用户可以轻松地选择评价等级，同时系统会实时显示所选的星级数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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哦~~~