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

这样的效果有几种方法

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. C#中的String.Format方法(转)

    一.定义String.Format是将指定的 String类型的数据中的每个格式项替换为相应对象的值的文本等效项. 如: (1)string p1 = "Jackie";strin ...

  2. C Memory Layout C语言中的内存布局

    在C语言中,内存的主要分为下列几部分: 1. Text/Code Segment 文本/代码区 2. Initialized Data Segments 初始化的数据区 3. Uninitialize ...

  3. 三星S4接电话黑屏无法挂断通话

    最近发现S4的通话距离感应起出了问题,接电话后直接熄屏,按什么按钮都没有反应.通话结束后只能等对方挂断才会恢复正常,再或者长按9秒电源键强制重启.极大的影响了实用体验.网上搜了下,发现这样的问题还不少 ...

  4. hdu Waiting ten thousand years for Love

    被这道题坑到了,如果单纯的模拟题目所给的步骤,就会出现同一个位置要走两次的情况...所以对于bfs来说会很头痛. 第一个代码是wa掉的代码,经过调试才知道这个wa的有点惨,因为前面的操作有可能会阻止后 ...

  5. Webscan360的防御与绕过

    这两天给360做了一个webscan360的总结,结果补丁还没有出来,就被人公布到了91org上面,既然公开了,那我就做一个总结 首先我们贴上它最新的防御正则 \<.+javascript:wi ...

  6. php代码审计基础笔记

    出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...

  7. [转]Entity Framework走马观花之把握全局

    本文转自:http://blog.csdn.net/bitfan/article/details/12887007 Entity Framework走马观花 之 把握全局 ============== ...

  8. GDUT——1169: Krito的讨伐(优先队列BFS)

    1169: Krito的讨伐 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 619  Solved: 102 Description Krito终于干 ...

  9. iOS 用宏定义写一个单例(Singleton)

    用如下方法定义单例 @interface singleton_interface(ClassName); @end 实现单例在 @implemention singleton_implemention ...

  10. Sublime Text初识

    一 基础安装1. 安装Package Control使用快捷键ctrl+`,调出输出窗口, 然后输入官网提供的代码, 获取代码地址:https://packagecontrol.io/installa ...