如何基于jQuery实现五角星评分
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了如何基于jQuery实现五角星评分,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心。当前位置后面的是空心。注意此处不能完全用链式编程写到底
2. 鼠标离开,ment的所有孩子变为空心五角星。额外,找到current, 让current和它的前面都是实心。
3. 点击li的时候,当前的位置增加个current的class, 其余位置移除current
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> * { padding: 0; margin: 0; } .ment { font-size: 40px; color: #ff16cf; } .ment 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 = "★"; $(".ment > li").on("mouseenter", function () { $(this).text(wjx_s).prevAll().text(wjx_s); $(this).nextAll().text(wjx_k); }); //2. 给ul注册鼠标离开时间,让所有的li都变成空心 $(".ment").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注册点击事件 $(".ment>li").on("click", function () { $(this).addClass("current").siblings().removeClass("current"); }); }); </script> </head> <body> <ul class="ment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程