zoukankan      html  css  js  c++  java
  • jQuery---五角星评分案例

    五角星评分案例

    1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心。当前位置后面的是空心。注意此处不能完全用链式编程写到底

    2. 鼠标离开,comment的所有孩子变为空心五角星。额外,找到current, 让current和它的前面都是实心。

    3. 点击li的时候,当前的位置增加个current的class, 其余位置移除current 

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>五角星评分案例</title>
      <style>
        * {
          padding: 0;
          margin: 0;
        }
    
        .comment {
          font-size: 40px;
          color: #ff16cf;
        }
    
        .comment li {
          float: left;
        }
    
        ul {
          list-style: none;
        }
      </style>
      <script src="jquery-1.12.4.js"></script>
      <script>
        $(function () {
    
          //1. 给li注册鼠标经过事件,让自己和前面所有的兄弟都变成实心
          var wjx_k = "";
          var wjx_s = "";
          $(".comment > li").on("mouseenter", function () {
            $(this).text(wjx_s).prevAll().text(wjx_s);
            $(this).nextAll().text(wjx_k);
          });
    
          //2. 给ul注册鼠标离开时间,让所有的li都变成空心
    
          $(".comment").on("mouseleave", function () {
            //2. 给ul注册鼠标离开时间,让所有的li都变成空心
            $(this).children().text(wjx_k);
            //再做一件事件,找到current,让current和current前面的变成实心就行。
            $("li.current").text(wjx_s).prevAll().text(wjx_s);
          });
    
    
          //3. 给li注册点击事件
          $(".comment>li").on("click", function () {
            $(this).addClass("current").siblings().removeClass("current");
          });
    
        });
      </script>
    
    
    </head>
    
    <body>
      <ul class="comment">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </body>
    
    </html>
  • 相关阅读:
    JS document.execCommand实现复制功能(带你出坑)
    jquery动态添加删除一行数据示例
    SpringBoot SpEL表达式注入漏洞-分析与复现
    Fastjson 1.2.22-24 反序列化漏洞分析
    udf提权原理详解
    ZZCMS v8.2 前台Insert注入+任意文件删除
    安恒杯 3月线上个人赛WriteUp
    SQLI LABS Stacked Part(38-53) WriteUp
    【转】Ubuntu16.04安装docker
    安装部署k8s-版本-1.13
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/12259867.html
Copyright © 2011-2022 走看看