rank 和 星星评级
我们常常看到打分,如下图
这样的效果有几种方法
1.用:lt(index)
/* $('dl').each(function(){ var ths = $(this); $(this).find('dd').click(function(){ ths.find('dd').removeClass('selected'); ths.find('dd:lt('+ ($(this).index()+1) +')').addClass('selected'); }).dblclick(function(){ $(this).removeClass('selected'); }) }); */ $('dd').click(function(){ var num = $(this).index(); $('dd').removeClass('selected');//先移除所有的效果 $('dd:lt('+(num+1)+')').addClass('selected');//小于这个index的dd执行 }).dblclick(function(){//双击 $('dd').removeClass('selected'); }); })
2prevAll()和nextAll()方法的结合
$(function(){ $("dd").click(function(){ $(this).addClass("selected"); $(this).prevAll().addClass("selected"); $(this).nextAll().removeClass("selected"); }); $("dd").dblclick(function(){ $("dd").removeClass("selected"); }););
rank 和 星星评级的更多相关文章
- js点亮星星评分并获取参数的js代码
点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE h ...
- 关于inline-block的间隙问题
很久之前写过一个星星评级的样式,当时开发人员在嵌套代码的时候出现很多问题,同样的一个样式有的页面正常有的页面就出现星星错位的问题,仔细研究了一下代码,发现问题原来出在了inline-block上. 目 ...
- Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
- 【转载】 github vue 高星项目
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- VUE组件汇总
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)
Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
- Vue开源项目汇总(史上最全)(转)
目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- vue(6)生态
来自:https://www.jianshu.com/p/22a99426b524?utm_campaign=maleskine&utm_content=note&utm_medium ...
- Vue相关开源项目库汇总 http://www.opendigg.com/tags/front-vue
awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. 如果收录的项目有错误,可以通过 ...
随机推荐
- 常用NuGet插件
1.Install-Package System.Data.SQLite 2.Install-Package FluentData
- IIS权限设置
Check in the IIS Manager to see what authentication type is enabled on the directories that are part ...
- 获取Dell,Lenovo电脑的保修期
2015-4-6写的代码(Dell), 不知道如何对报错进行友好化处理,于是采用了"非空"和"非空的补集"处理方式. $service = New-WebSer ...
- hudson安装
Hudson 只是一个持续集成服务器(持续集成工具),要想搭建一套完整的持续集成管理平台, SVN.Maven.Sonar 等工具按需求整合则可. 1. 安装 JDK 并配置环境变量(略) J ...
- 小组项目alpha发布的评价
新蜂团队一直都特别努力,这节课我也看到了他们努力的结果--项目可以顺利运行,在两个同学试玩期间没有出现BUG,不知道玩游戏的同学的心情,反正我们在台下看得很开心的. 飞天小女警组的礼物挑选系统,是一个 ...
- 针对css3特性浏览器兼容 封装less
//--------------------------------------------------- // LESS Prefixer //--------------------------- ...
- Android消息处理机制
Android消息处理机制 Android应用程序消息处理机制(深入到native,实际由管道实现-pipe&epoll)
- 学会查看tomcat的日志文件
1.Tomcat的启动日志写出了几乎所有的启动历史记录, 包括部署项目,deploy项目.用了什么log日志记录软件,启动的tomcat引擎是什么,正在部署什么项目deploying
- Grand Theft Auto V 图形研究(3)
原文链接 http://www.adriancourreges.com/blog/2015/11/02/gta-v-graphics-study-part-3/ Post Processing Eff ...
- 关于在jquery动态修改css,html中,mouseenter,mouseleave,click等方法失效的处理