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上的项目到这里,也欢迎各位提交项目给我们. 如果收录的项目有错误,可以通过 ...
随机推荐
- JBPM表达业务流程(流程定义语言)
业务流程包括三部分: 活动 Activity / 节点 Node (有很多种,不同的类型有不同的功能,必须要有一个Start Activity) 连线 Transition / 转移 (从一个Acti ...
- [Bug FIX]安装 account_check_writing模块后采购收据打印报错的问题
大写金额没填报错 修改:report_check.xml文件,把<span t-esc="fill_stars(o.amount_in_word)"/>一行替换为 &l ...
- php构造函数,引入数据库操作类函数
<?php /** * 基于左右值排序的无限分类算法 * 数据库结果为 CREATE TABLE om_catagory ( CatagoryID int(10) un ...
- HDU 4825 Xor Sum(经典01字典树+贪心)
Xor Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Others) Total ...
- 清橙 A1206 小Z的袜子(莫队算法)
A1206. 小Z的袜子 时间限制:1.0s 内存限制:512.0MB 总提交次数:1357 AC次数:406 平均分:46.75 将本题分享到: 查看未格式化的试题 ...
- 《Java核心技术卷一》笔记 多线程
有时,我们需要在一个程序中同时并行的处理多个任务,如播放器一边要播放音乐同时还要不断更新画面显示,或者是一边执行耗时任务,UI还能一边继续响应各种事件.还有的时候,一个任务需要很长时间才能完成,如果分 ...
- Linux 计划任务 Crontab 笔记与总结(5)crontab 常见错误与案例
① 环境变量 cd ~ pwd 就会到你登陆的那个用户的根目录下 ls -a 能够查看到 .bash_profile 这个文件 vim .bash_profile 这里面设置了一些环境变量. 可以设置 ...
- Swing 刷新容器
JPanel pchks = new JPanel();// 容器刷新(重新layout所有空间)pchks.validate();// 容器重绘(当容器内的东西由多变少时,防止多出来的部分没有清楚) ...
- 【IOS笔记】Event Delivery: The Responder Chain
Event Delivery: The Responder Chain 事件分发--响应链 When you design your app, it’s likely that you want t ...
- HTML: margin詳解
margin:10px; 設置塊元素的上,右,下,左方向的值同爲10px margin:10px 30px; 設置塊元素的上和下爲10px,左和右爲30px; margin:10px 20px 30p ...