基于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插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 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/11/25 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
关于this和self的使用说明
2010/08/01 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Python正则表达式知识汇总
2017/09/22 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python实现简单名片管理系统
2018/11/30 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
公积金单位接收函
2014/01/11 职场文书
财政专业求职信范文
2014/02/19 职场文书
祝酒词范文
2015/08/12 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书