基于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轻松实现无缝轮播效果
Mar 22 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
给面试官的感谢信
2014/02/01 职场文书
班级出游活动计划书
2014/08/15 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
回复函范文
2015/07/14 职场文书
法制教育主题班会
2015/08/13 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
Python利用FlashText算法实现替换字符串
2022/03/31 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技