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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
python的socket编程入门
2018/01/29 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
行政专员岗位职责
2014/01/02 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
前处理组长岗位职责
2014/03/01 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
返乡农民工证明
2015/06/24 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python