jQuery实现五星评价

最新推荐文章于 2024-04-20 00:42:24 发布

温柔女魔头

最新推荐文章于 2024-04-20 00:42:24 发布

阅读量244

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_19880197/article/details/86730730

版权

jQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

HTML

<body>
    <div class="content">
        <ul>
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
        </ul>
    </div>
</body>

CSS

*{
    margin: 0;
    padding: 0;
}
.content{
    font-size: 40px;
}
.content li{

    float: left;
}
ul{
    list-style: none;
}

jQuery

 <script src="jQuery/jquery-1.12.3.js"></script>
        <script>
           $(function () {
//               给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
               var wjx_k="☆";
               var wjx_s="★";
              $("li").on("mouseenter",function () {
                   $(this).text(wjx_s).prevAll().text(wjx_s);
                   $(this).nextAll().text(wjx_k);
             });
//               给ul注册鼠标离开事件，让所有li都变成空心
               $("ul").on("mouseleave",function () {
                  $(this).children().text(wjx_k);
//                 找到current 让current和current前面的都变成实心
                   $(" .current").text(wjx_s).prevAll().text(wjx_s);
               });
//               给li注册点击事件
              $("li").on("click",function () {
                  $(this).addClass("current").siblings().removeClass("current");
              });
           });
        </script>

温柔女魔头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现五星评价

HTML&lt;body&gt; &lt;div class="content"&gt; &lt;ul&gt; &lt;li&gt;☆&lt;/li&gt; &lt;li&gt;☆&lt;/li&gt; &lt;li&gt;☆&lt;/li&gt
复制链接

扫一扫

专栏目录