Jquery制作小星星(常用于评价)

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            li{
                list-style: none;
                float: left;
                font-size: 36px;
                color: blue;
                cursor: pointer;
            }
        </style>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script>
            var stark = "☆";
            var stars = "★"
            $(function(){
                //未点击之前 li标签本身及前面全部添加样式
                $("li").on("mouseenter", function () {
                 $(this).text(stars).prevAll().text(stars);
                 $(this).nextAll().text(stark);
             });
 //鼠标离开事件，让所有的星星为空心；
                 $("li").on("mouseleave", function () {
                     $("li").text(stark);
                     //让class 为current的 前面所有的星星为实体，后面的星星为空
                     $("li.current").text(stars).prevAll().text(stars);
                 })
//注册点击事件，让当前点击的前面的星星全为实体；
             $("li").on("click",function () {
                 $(this).addClass("current").siblings().removeClass("current");
             })
            })
        </script>
    </head>
    <body>
        <div>
            <ul>
               <li>☆</li>
             <li>☆</li>
             <li>☆</li>
             <li>☆</li>
             <li>☆</li>
            </ul>
        </div>
    </body>
</html>
复制代码

 

posted @   ZaraNet  阅读(260)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示