JQuery五星评价案例

最新推荐文章于 2021-09-09 20:08:48 发布

酸霉汤

最新推荐文章于 2021-09-09 20:08:48 发布

阅读量421

点赞数 1

分类专栏： # JQuery 文章标签： jquery css3 html5

本文链接：https://blog.csdn.net/itaylorfan/article/details/107112475

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

演示效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五星评分案例</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            //给所有li加事件
            $(".container>ul>li").mouseover(function () {
               $(this).text("★").prevAll().text("★").end().nextAll().text("☆");
            }).mouseout(function () {   //移出来所有变回空心五角星
                $(".container>ul>li").text("☆");
                //有属性index的li保持不变
                $(".container>ul>li[index=10]").text("★").prevAll().text("★");
            }).click(function () {  //点击后保存星星
                //使用attr()方法给被点的li加一个自定义属性index
                $(this).attr("index","10").siblings().removeAttr("index");
                var ind=$(this).index();   //获取当前li的下标
                switch (ind+1) {
                    case 1:$("#score").html("极差");
                        break;
                    case 2:$("#score").html("差");
                        break;
                    case 3:$("#score").html("良");
                        break;
                    case 4:$("#score").html("好");
                        break;
                    case 5:$("#score").html("非常好");
                        break;
                }
            });
        });
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 300px;
            height: 40px;
            position: relative;
            margin: 50px auto;
            line-height: 40px;
            font-size: 20px;
        }
        .container ul{
            list-style: none;
        }
        .container ul li{
            float: left;
            font-size: 30px;
            color: #e6b64c;
        }
    </style>
</head>
<body>
<div class="container">
    <ul>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
    <span id="score">请评分</span>
</div>
</body>
</html>

酸霉汤

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery五星评价案例

演示效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五星评分案例</title> <script src="js/jquery-3.5.1.min.js"></script> <script> $(function () { /
复制链接

扫一扫

专栏目录