如何基于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把获取到的input值转换成json
May 15 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
jQuery treeview树形结构应用
Mar 24 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
用PHP读取RSS feed的代码
2008/08/01 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python实现包含min函数的栈
2016/04/29 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
python实现井字棋小游戏
2020/03/04 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
国际领先的学术出版商:Springer
2017/01/11 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
土木工程师岗位职责
2013/11/24 职场文书
财务会计人员岗位职责
2013/11/30 职场文书
微信营销策划方案
2014/02/24 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
差生评语大全
2014/05/04 职场文书
企业年度评优方案
2014/06/02 职场文书
企业文化口号
2014/06/12 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
初三数学教学反思
2016/02/17 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
导游词之崇武古城
2019/10/07 职场文书
Python绘制分类图的方法
2021/04/20 Python
golang中的struct操作
2021/11/11 Golang
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js