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上的项目到这里,也欢迎各位提交项目给我们. 如果收录的项目有错误,可以通过 ...
随机推荐
- Qt SizePolicy 属性
控件的sizePolicy说明控件在布局管理中的缩放方式.Qt提供的控件都有一个合理的缺省sizePolicy,但是这个缺省值有时不能适合 所有的布局,开发人员经常需要改变窗体上的某些控件的sizeP ...
- Java栈与堆一篇好文
http://blog.csdn.net/zhangao0086/article/details/6347342
- 20. 求阶乘序列前N项和
求阶乘序列前N项和 #include <stdio.h> double fact(int n); int main() { int i, n; double item, sum; whil ...
- journalctl --help
journalctl [OPTIONS...] [MATCHES...] Query the journal. Flags: --system Show the sy ...
- 20145225 实验四《Andoid开发基础》
实验内容 搭建Android环境 运行Android 修改代码,能输出学号 实验步骤 安装Android Studio 安装Android的SDK 运行Andriod Studio并在模拟手机上显示自 ...
- PHP数组常用函数分类整理
一.数组操作的基本函数数组的键名和值array_values($arr); 获得数组的值array_keys($arr); 获得数组的键名array_flip($arr); 数组中的值与键名互换 ...
- Siddhi CEP Window机制
https://docs.wso2.com/display/CEP400/SiddhiQL+Guide+3.0#SiddhiQLGuide3.0-Window https://docs.wso2.co ...
- jquery 事件 多次绑定,多次触发,怎么清除历史绑定事件
Jquery在处理事件的时候有时候会遇到预想不到的结果 如下 <a id="link_foo">Foo</a> <script type=" ...
- IOS 移除storyboard
我是IOS新手,都说storyboard是个好东西,但是我搞了一会始终没有搞懂,并且我觉得学习一门语言,使用类似以前网页三剑客这种所见所得工具,不太利于学习,所以我就想着移除storyboard 1: ...
- Mysql 常用命令集
1.mysqlbinlog工具使用方法如下: 先使用 show binary logs 查看 在使用导出命令 mysqlbinlog -R -uroot -pxxxx -hxxx.xxx.xxx.xx ...