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

这样的效果有几种方法

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. 常用NuGet插件

    1.Install-Package System.Data.SQLite 2.Install-Package FluentData

  2. IIS权限设置

    Check in the IIS Manager to see what authentication type is enabled on the directories that are part ...

  3. 获取Dell,Lenovo电脑的保修期

    2015-4-6写的代码(Dell), 不知道如何对报错进行友好化处理,于是采用了"非空"和"非空的补集"处理方式. $service = New-WebSer ...

  4. hudson安装

    Hudson 只是一个持续集成服务器(持续集成工具),要想搭建一套完整的持续集成管理平台,  SVN.Maven.Sonar 等工具按需求整合则可.   1. 安装 JDK 并配置环境变量(略)  J ...

  5. 小组项目alpha发布的评价

    新蜂团队一直都特别努力,这节课我也看到了他们努力的结果--项目可以顺利运行,在两个同学试玩期间没有出现BUG,不知道玩游戏的同学的心情,反正我们在台下看得很开心的. 飞天小女警组的礼物挑选系统,是一个 ...

  6. 针对css3特性浏览器兼容 封装less

    //--------------------------------------------------- // LESS Prefixer //--------------------------- ...

  7. Android消息处理机制

    Android消息处理机制 Android应用程序消息处理机制(深入到native,实际由管道实现-pipe&epoll)

  8. 学会查看tomcat的日志文件

    1.Tomcat的启动日志写出了几乎所有的启动历史记录, 包括部署项目,deploy项目.用了什么log日志记录软件,启动的tomcat引擎是什么,正在部署什么项目deploying

  9. Grand Theft Auto V 图形研究(3)

    原文链接 http://www.adriancourreges.com/blog/2015/11/02/gta-v-graphics-study-part-3/ Post Processing Eff ...

  10. 关于在jquery动态修改css,html中,mouseenter,mouseleave,click等方法失效的处理