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>
  • 相关阅读:
    Elasticsearch集群+kibana
    kafka集群搭建
    Zookeeper集群搭建
    Hadoop+Hbase+Zookeeper分布式存储构建
    正则文本处理
    Haproxy+keepalived高可用集群实战
    httpsqs消息队安装
    LVS-TUN模式
    一.4.序列化使用之机柜资源及序列化高级用法
    一.3.序列化使用之idc资源与api文档
  • 原文地址:https://www.cnblogs.com/colorchild/p/13461534.html
Copyright © 2011-2022 走看看