如何基于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实现提示语淡入效果
May 05 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
牡丹941资料
2021/03/01 无线电
Wordpress php 分页代码
2009/10/21 PHP
php flv视频时间获取函数
2010/06/29 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
joomla数据库操作示例代码
2016/01/06 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JS中数组重排序方法
2016/11/11 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
layui使用label标签的方法
2019/09/14 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
进一步探究Python中的正则表达式
2015/04/28 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python脚本调试工具安装过程
2021/01/11 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
个人思想理论学习的自我鉴定
2013/11/30 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS