五角星评分案例

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>

jQuery---五角星评分案例的更多相关文章

  1. jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

    一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...

  2. jQuery 五角星评分

    五角星打分 我用的是搜狗输入法上带的特殊符号打出来的  空五角星:☆  实五角星:★ 1.html <ul class="comment"> <li>☆&l ...

  3. css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）

    1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花 ...

  4. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  5. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  6. 纯CSS实现网站常用的五角星评分和分数展示交互效果

    最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方 ...

  7. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  8. Jquery学习笔记（2）--五角星评分

    网购五星评分模拟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

随机推荐

  1. 线程池之 ThreadPoolExecutor

    线程池之 ThreadPoolExecutor + 面试题 线程池介绍 线程池(Thread Pool):把一个或多个线程通过统一的方式进行调度和重复使用的技术,避免了因为线程过多而带来使用上的开销. ...

  2. java设计模式2————工厂模式

    1.工厂模式介绍: 1.1.实现了创建者与调用者的分离 1.2.详细分类: 简单工厂模式 工厂方法模式 抽象工厂模式 1.3.所遵循的OOP原则: 开闭原则:对扩展开放,对修改关闭 依赖倒转原则:面向 ...

  3. Spring基础(一)_控制反转(IOC)

    Spring-IOC 1.简述 1.1 依赖注入DI 现实开发中,每一个应用都会由两个或多个类组成,这些类之间相互协作完成特定的业务逻辑.根据传统做法,每个对象负责管理与自己协作的对象的引用(也就是, ...

  4. HDU_5729_rmq+二分

    http://acm.hdu.edu.cn/showproblem.php?pid=5726 rmq修改成gcd的,关键是找个数,用二分来找,刚开始理解了好久,因为每个区间内gcd是递减的,所以可以优 ...

  5. Nginx：Nginx limit_req limit_conn限速

    简介 Nginx是一个异步框架的Web服务器,也可以用作反向代理,负载均衡器和HTTP缓存,最常用的便是Web服务器.nginx对于预防一些攻击也是很有效的,例如CC攻击,爬虫,本文将介绍限制这些攻击 ...

  6. 教你如何快速上手markdown语法，编写技术博客（史上最全最简，用MarkDown写博客）

    首先,进行有道云笔记官网,新建一份markdown文档, 如下图 然后,在文档编辑区,左边,复制如下段落文字 加粗 斜线 标记颜色 下划线 废弃线 一级标题 二级标题 三级标题 四级标题 五级标题 六 ...

  7. step1：准备歌词之《前端开发是个啥》

    以下是给大家介绍前端开发的填词,曲子是李圣杰的<最近>,大家喜欢可以试试唱. 点赞关注超过100的平台,我后续上来发本人原唱视频(目前正在练习中...),另外大家觉得哪些词写得不好的,欢迎 ...

  8. Java开发最佳实践(二) ——《Java开发手册》之"异常处理、MySQL 数据库"

    二.异常日志 (一) 异常处理 (二) 日志规约 三.单元测试 四.安全规约 五.MySQL数据库 (一) 建表规约 (二) 索引规约 (三) SQL语句 (四) ORM映射 六.工程结构 七.设计规 ...

  9. css架构技巧

    1. 写一个reset.css 用于清除浏览器标签默认样式并定义全局样式,这样就不会因为浏览器默认样式出现问题,因为不同浏览器的默认样式还是不一样的

  10. 大数四则运算之加法运算--------C语言版（未考虑负数）

    /* 声明两个字符数组,用于存储大数,声明两个整数型数组便于计算,将字符数组中的元素转换为对应整数存于整数数组中,将低位放在整数数组低位,便于对齐计算 判断是否有进位,计算结果高位先输出,从数组后往前 ...