五角星评分
时间:2019-09-18
本文章向大家介绍五角星评分,主要包括五角星评分使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
案例分析:
1,鼠标经过每个 li , 当前 li 以及前面当前这个 li 前面所有的 li 都变成实心
2,鼠标离开 ul ,所有的 li 都变成空心
3,如果点击了某个 li , 鼠标离开 ul 的时候,点击的这个 li 以及这个 li 之间的所有 li 都变成实心
4,因此 , 当点击了某个 li ,要记录这个li , 给这个 li 一个标记 clsss类标记 "current"等。
jQuery代码:
var wjx-k="☆"; var wjx-s="★"; $(" ul > li").on("mouseenter" , function(){ $(this).text(wjx-s).prevAll().text(wjx-s); $(this).nextAll().text(wjx-k); }) $("ul").on("mouseleave" , function(){ $(this).children().text(wjx-k); $("ul > li.current").text(wjx-s).prevAll.text(wjx-s); }) $("ul > li").on("click" , function(){ $(this).addClass("current").siblings().removeClass("current"); })
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> ul { font-size: 40px; color: #ff16cf; } ul 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 = "★"; $("ul >li").on("mouseenter", function () { $(this).text(wjx_s).prevAll().text(wjx_s); $(this).nextAll().text(wjx_k); }); //2. 给ul注册鼠标离开时间,让所有的li都变成空心 $("ul").on("mouseleave", function () { $(this).children().text(wjx_k); //再做一件事件,找到current,让current和current前面的变成实心就行。 $("li.current").text(wjx_s).prevAll().text(wjx_s); }); //3. 给li注册点击事件 $(" ul >li").on("click", function () { $(this).addClass("current").siblings().removeClass("current"); }); }); </script> </head> <body> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> </html>
原文地址:https://www.cnblogs.com/shanlu0000/p/11545457.html
- Flash/Flex学习笔记(43):动量守恒与能量守恒
- Flash/Flex学习笔记(57):实用技巧
- 使用 MEF 轻松实现云部署
- 检测常见ASP.NET配置安全漏洞
- Flash/Flex学习笔记(56):矩阵变换
- js小技巧:tab页切换
- c#字符串操作方法实例
- Android中Fragment+ViewPager的配合使用
- 结合机器学习与生物医学技术,寻找Uber司机出行模式
- ASP.NET MVC 4 - 测试驱动 ASP.NET MVC
- LVS+Keepalived高可用环境部署梳理(主主和主从模式)
- 随着区块链的火爆,相关顶级域名“矿池”KC.com已建站
- Flash/Flex学习笔记(50):3D线条与填充
- LVM常规操作记录梳理(扩容/缩容/快照等)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python六十九课——网络编程之TCP协议
- Linux扩容分区操作过程
- python第七十课——python2与python3的一些区别
- Linux运维必会的100道MySql面试题之(一)
- Linux运维必会的100道MySql面试题之(二)
- Apache服务的反向代理及负载均衡配置
- Linux系统集群架构线上项目配置实战(二)
- Linux系统集群架构线上项目配置实战(三)
- Linux系统集群架构线上项目配置实战(四)
- Linux系统集群架构线上项目配置实战 五(完结篇)
- 生产Mysql数据库数据恢复实战过程
- voliate工作实际应用场景
- Linux三剑客命令之Awk
- 面试2万月薪必会知识:AQS
- MyBatis XML详解