jQuery实现的五星点评功能【案例】


Posted in jQuery onFebruary 18, 2019

本文实例讲述了jQuery实现的五星点评功能。分享给大家供大家参考,具体如下:

效果图:

jQuery实现的五星点评功能【案例】

需求分析:

1.鼠标移入li标签,当前li标签和之前的li标签全部变为实心;
2.鼠标移开,所有的li标签变为空心;
3.鼠标点击li标签,当前li标签和之前的li标签全部变为实心

jq代码实现过程:

var shiXin="★";
 var kongXin='☆'
 $('li').on('mouseenter',function ( ) {
  //需求1:鼠标移入后,当前的li标签和前面的li标签显示实心,后面的li标签显示空心
  $(this).text(shiXin).prevAll().text(shiXin).end().nextAll().text(kongXin);
 }).on('mouseleave',function ( ) {
  $('li').text(kongXin);
  //找到索引的li,给这个li和它前面的li设置实心
  $('li[index="dianji"]').text(shiXin).prevAll().text(shiXin);
 }).on('click',function ( ) {
  //给点击的li添加索引,其余的去除索引
   $(this).attr('index','dianji').siblings().removeAttr('index')
 })

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>3water.com jQuery五星点评</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  ul {
   list-style:none
  }
  li {
   float:left;
   cursor: pointer;
   color: red;
   font-size: 40px;
  }
 </style>
</head>
<body>
<ul>
 <li>☆</li>
 <li>☆</li>
 <li>☆</li>
 <li>☆</li>
 <li>☆</li>
</ul>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script>
  $ ( function () {
   /*一:需求分析: 1.鼠标移入li标签,当前li标签和之前的li标签全部变为实心;
         2.鼠标移开,所有的li标签变为空心;
         3.鼠标点击li标签,当前li标签和之前的li标签全部变为实心
    二:思路分析
      1.获取元素
      2.注册事件
      3.事件处理
   */
  /*  var shiXin='★';
   var kongXin='☆';
    $ ( "li" ).on ( "mouseenter", function () {
    // 1.鼠标移入li标签,当前li标签和之前的li标签全部变为实心,后面的五角星变为空心(这一步必须要,不然往前移会有bug)
     $ ( this ).text ( shiXin ).prevAll ().text ( shiXin ).end().nextAll ().text(kongXin)
     //end()方法是返回上一个状态的返回值
    } ).on ( "mouseleave", function () {
    //2.鼠标移开,所有的li标签变为空心;
    $('li').text(kongXin);
    $ ( 'li[index="dianji"]' ).text(shiXin).prevAll().text(shiXin);
      //
    } ).on('click',function ( ) {
     //3.鼠标点击li标签,当前li标签和之前的li标签全部变为实心
    //给点击的li添加索引
     $(this).attr('index','dianji').siblings().removeAttr('index');
    })*/
  //第二遍:
   var shiXin="★";
   var kongXin='☆'
   $('li').on('mouseenter',function ( ) {
    //需求1:鼠标移入后,当前的li标签和前面的li标签显示实心,后面的li标签显示空心
    $(this).text(shiXin).prevAll().text(shiXin).end().nextAll().text(kongXin);
   }).on('mouseleave',function ( ) {
    $('li').text(kongXin);
    //找到索引的li,给这个li和它前面的li设置实心
    $('li[index="dianji"]').text(shiXin).prevAll().text(shiXin);
   }).on('click',function ( ) {
    //给点击的li添加索引,其余的去除索引
     $(this).attr('index','dianji').siblings().removeAttr('index')
   })
  } )
 </script>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 #jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 #jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 #jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 #jQuery
jquery无缝图片轮播组件封装
Nov 25 #jQuery
You might like
德生PL990的分析评价
2021/03/02 无线电
十天学会php(3)
2006/10/09 PHP
生成静态页面的PHP类
2006/11/25 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
2015年中个人总结范文
2015/03/10 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android