我们常常看到打分,如下图

这样的效果有几种方法

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 和 星星评级的更多相关文章

  1. js点亮星星评分并获取参数的js代码

    点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE h ...

  2. 关于inline-block的间隙问题

    很久之前写过一个星星评级的样式,当时开发人员在嵌套代码的时候出现很多问题,同样的一个样式有的页面正常有的页面就出现星星错位的问题,仔细研究了一下代码,发现问题原来出在了inline-block上. 目 ...

  3. Vue应用框架整合与实战--Vue技术生态圈篇

    实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...

  4. 【转载】 github vue 高星项目

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  5. VUE组件汇总

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  6. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

  7. Vue开源项目汇总(史上最全)(转)

    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  8. vue(6)生态

    来自:https://www.jianshu.com/p/22a99426b524?utm_campaign=maleskine&utm_content=note&utm_medium ...

  9. Vue相关开源项目库汇总 http://www.opendigg.com/tags/front-vue

    awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. 如果收录的项目有错误,可以通过 ...

随机推荐

  1. JBPM表达业务流程(流程定义语言)

    业务流程包括三部分: 活动 Activity / 节点 Node (有很多种,不同的类型有不同的功能,必须要有一个Start Activity) 连线 Transition / 转移 (从一个Acti ...

  2. [Bug FIX]安装 account_check_writing模块后采购收据打印报错的问题

    大写金额没填报错 修改:report_check.xml文件,把<span t-esc="fill_stars(o.amount_in_word)"/>一行替换为 &l ...

  3. php构造函数,引入数据库操作类函数

    <?php /**     * 基于左右值排序的无限分类算法     * 数据库结果为 CREATE TABLE om_catagory (      CatagoryID int(10) un ...

  4. HDU 4825 Xor Sum(经典01字典树+贪心)

    Xor Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others) Total ...

  5. 清橙 A1206 小Z的袜子(莫队算法)

    A1206. 小Z的袜子 时间限制:1.0s   内存限制:512.0MB   总提交次数:1357   AC次数:406   平均分:46.75   将本题分享到:        查看未格式化的试题 ...

  6. 《Java核心技术卷一》笔记 多线程

    有时,我们需要在一个程序中同时并行的处理多个任务,如播放器一边要播放音乐同时还要不断更新画面显示,或者是一边执行耗时任务,UI还能一边继续响应各种事件.还有的时候,一个任务需要很长时间才能完成,如果分 ...

  7. Linux 计划任务 Crontab 笔记与总结(5)crontab 常见错误与案例

    ① 环境变量 cd ~ pwd 就会到你登陆的那个用户的根目录下 ls -a 能够查看到 .bash_profile 这个文件 vim .bash_profile 这里面设置了一些环境变量. 可以设置 ...

  8. Swing 刷新容器

    JPanel pchks = new JPanel();// 容器刷新(重新layout所有空间)pchks.validate();// 容器重绘(当容器内的东西由多变少时,防止多出来的部分没有清楚) ...

  9. 【IOS笔记】Event Delivery: The Responder Chain

    Event Delivery: The Responder Chain  事件分发--响应链 When you design your app, it’s likely that you want t ...

  10. HTML: margin詳解

    margin:10px; 設置塊元素的上,右,下,左方向的值同爲10px margin:10px 30px; 設置塊元素的上和下爲10px,左和右爲30px; margin:10px 20px 30p ...