基于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 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jquery实现图片放大镜效果
Dec 23 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作的文本留言本的例子(一)
2006/10/09 PHP
php基础学习之变量的使用
2011/06/09 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
JavaScript类的写法
2016/09/17 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Python 自由定制表格的实现示例
2020/03/20 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
机械专业应届生求职信
2013/09/21 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
幼儿园感谢信
2015/01/21 职场文书
公司给客户的感谢信
2015/01/23 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL
python中数组和列表的简单实例
2022/03/25 Python