基于jquery实现五星好评


Posted in jQuery onNovember 18, 2017

在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>五角星评分案例</title> 
  <style> 
    * { 
      padding: 0; 
      margin: 0; 
    } 
    .comment { 
      font-size: 40px; 
      color: teal; 
    } 
    .comment li { 
      float: left; 
    } 
    ul { 
      list-style: none; 
    } 
  </style> 
</head> 
<body> 
<ul class="comment"> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
</ul> 
 
<script src="jquery-1.12.2.js"></script> 
<script> 
  $(function () { 
    var wjx_k = "☆"; 
    var wjx_s = "★"; 
    //prevAll获取元素前面的兄弟节点,nextAll获取元素后面的所有兄弟节点 
    //end 方法;返回上一层 
    //siblings 其它的兄弟节点 
    //绑定事件 
    $("li").on("mouseenter", function () { 
      $(this).html(wjx_s).prevAll().html(wjx_s).end().nextAll().html(wjx_k); 
    }).on("click", function () { 
      $(this).addClass("active").siblings().removeClass("active") 
    }); 
    $("ul").on("mouseleave", function () { 
      $("li").html(wjx_k); 
      $(".active").text(wjx_s).prevAll().text(wjx_s); 
    }) 
  }); 
</script> 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery实现滚动效果
Nov 17 #jQuery
基于jQuery实现定位导航位置效果
Nov 15 #jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 #jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 #jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 #jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 #jQuery
You might like
php Static关键字实用方法
2010/06/04 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP使用递归生成文章树
2015/04/21 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
跟老齐学Python之用while来循环
2014/10/02 Python
python执行外部程序的常用方法小结
2015/03/21 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Django框架表单操作实例分析
2019/11/04 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
C语言笔试题回忆
2015/04/02 面试题
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
厨师岗位职责
2013/11/12 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
医院标语大全
2014/06/23 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
靠谱准确的求职信
2019/04/02 职场文书
redis实现排行榜功能
2021/05/24 Redis
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python