jQuery实现五星好评

最新推荐文章于 2024-08-28 10:35:52 发布

原创最新推荐文章于 2024-08-28 10:35:52 发布 · 1.9k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #jquery #前端

本文介绍了一个简单的五星评价系统实现方案，通过HTML、CSS和jQuery完成页面布局及交互效果。该方案利用双层Span元素叠加背景图片的方式表现星星状态，并通过jQuery处理鼠标点击事件，更新星星显示及评价文字。

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

简单实现五星评价

html代码：

<div class="box">
        <ul>
            <li>
                <span class="star1"></span>
                <span class="star0"></span>
            </li>
            <li>
                <span class="star1"></span>
                <span class="star0"></span>
            </li>
            <li>
                <span class="star1"></span>
                <span class="star0"></span>
            </li>
            <li>
                <span class="star1"></span>
                <span class="star0"></span>
            </li>
            <li>
                <span class="star1"></span>
                <span class="star0"></span>
            </li>
            <li class="text">非常好</li>
        </ul>
    </div>

css代码：

<style type="text/css">
    .box{
        width: 500px;
        margin: 100px auto;
    }
    .box ul{
        list-style: none;
    }

    .box ul li{
        position: relative;
        float: left;
        width: 50px;
        height: 42px;
        line-height: 42px;
    }
    .box ul li span{
        position: absolute;
        display: block;
        width: 44px;
        height: 42px;
    }
    .box ul li .star0{
        background: url(image/star0.png);
    }
    .box ul li .star1{
        background: url(image/star1.png);
    }

</style>

jQuery代码：

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    /* 鼠标单击 */
    $(".box ul li").click(function(){
        var txt = ['非常差','差','一般','好','非常好'];
        $(this).find(".star0").css("display","none");
        $(this).prevAll().find(".star0").css("display","none");
        $(this).nextAll().find(".star0").css("display","block");
        $(".box ul .text").html(txt[$(this).index()]);
    }) 
</script>