如何基于jQuery实现五角星评分


Posted in jQuery onSeptember 02, 2020

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

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

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

如何基于jQuery实现五角星评分

代码如下

<!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 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 #jQuery
Jquery $.map使用方法实例详解
Sep 01 #jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 #jQuery
jQuery实现动态加载瀑布流
Sep 01 #jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 #jQuery
You might like
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
应聘教师推荐信
2013/10/31 职场文书
服装创业计划书范文
2014/02/05 职场文书
新年寄语大全
2014/04/12 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
售后客服个人自我评价
2014/09/14 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
实现一个简单得数据响应系统
2021/11/11 Javascript