基于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实现div跟随鼠标移动
Aug 20 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 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如何编写易读的代码
2007/07/10 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
纯JS实现轮播图
2017/02/22 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
python list语法学习(带例子)
2013/11/01 Python
python实现文件名批量替换和内容替换
2014/03/20 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python制作Windows系统服务
2017/03/25 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
2014年党务公开实施方案
2014/02/27 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书