jQuery案例之五星好评

最新推荐文章于 2023-04-22 15:17:03 发布

置顶流云浅暮

最新推荐文章于 2023-04-22 15:17:03 发布

阅读量602

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_40176258/article/details/84668138

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        div{
            width:400px;
            height:50px;
            margin:100px auto;
        }
        div li{
            float: left;
            padding:5px;
            font-size: 27px;
            color:#ff7b00;
            cursor: pointer;
            /* 不让文字被选中 */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
</head>
<body>
    <div>
            <ul>
                <li>☆</li>
                <li>☆</li>
                <li>☆</li>
                <li>☆</li>
                <li>☆</li>
            </ul>
    </div>
    <script src="../jQuery/jquery.js"></script>
    <script>
        $(function(){
            var before = "☆";
            var after = "★";
            //1.给li注册事件，让自己和前面的所有的li多变成实心
            $('div li').on('mouseenter',function(){
                //end()：让其恢复到上一次的状态，并返回之前的元素
                $(this).text(after).prevAll().text(after).end().nextAll().text(before);
            });
            //2.给ul注册鼠标离开事件，让所有的li多变成空心
            $('ul').on('mouseleave',function(){
                $(this).children().text(before);
                //找到current，让current和current前面的变成实心。
                $('li.current').text(after).prevAll().text(after);
            });
            //3.给li注册点击事件
            $("div li").on('click',function(){
                $(this).toggleClass('current').siblings().removeClass('current');
            });
        });
    </script>
</body>
</html>

效果图：

流云浅暮

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery案例之五星好评

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫