• 评分案例


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
    * {
    padding: 0;
    margin: 0;
    }

    .comment {
    font-size: 40px;
    color: yellow;
    }

    .comment li {
    float: left;
    }

    ul {
    list-style: none;
    }
    </style>
    <script src="jquery-1.12.2.js"></script>

    <script>
    // $(function () {
    // //获取所有的li绑定鼠标进入和鼠标离开和点击事件
    // $(".comment>li").mouseover(function () {
    // $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
    // }).mouseout(function () {
    // $(this).text("☆").prevAll("li").text("☆");
    // //获取属性index为10的这个li和这个li前面所有的li
    // $(".comment>li[index=10]").text("★").prevAll("li").text("★");
    //
    // }).click(function () {
    // $(this).attr("index","10").siblings("li").removeAttr("index");
    // });
    // });
    </script>
    <script>

    $(function () {
    $(".comment>li").mouseover(function () {
    $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
    }).mouseout(function () {
    $(".comment").find("li").text("☆");
    $(".comment>li[index=1]").text("★").prevAll("li").text("★")
    }).click(function () {
    $(this).attr("index","1").siblings("li").removeAttr("index");
    });
    });
    </script>
    </head>

    <body>
    <ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    </ul>
    </body>

    </html>

  • 相关阅读:
    Asp.net Vnext 模块化实现
    Asp.net Vnext 实现IView
    Asp.net Vnext TagHelpers
    MVC 源码调试
    Asp.net Vnext 中间件实现基本验证
    Azure SQL Federation(联合)
    Microsoft Azure 配置负载均衡
    Asp.net Vnext 调试源码
    阅读文献总结笔记9
    阅读文献总结笔记4
  • 原文地址:https://www.cnblogs.com/pxxdbk/p/12669059.html
Copyright © 2020-2023  润新知