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

这样的效果有几种方法

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. 解决 PermGen space Tomcat内存设置

    转自:http://qwzhl100.blog.163.com/blog/static/2133124200932813148637/ 在 使用Java程序从数据库中查询大量的数据或是应用服务器(如t ...

  2. MyBatis学习---使用MyBatis_Generator生成Dto、Dao、Mapping

    由于MyBatis属于一种半自动的ORM框架,所以主要的工作将是书写Mapping映射文件,但是由于手写映射文件很容易出错,所以查资料发现有现成的工具可以自动生成底层模型类.Dao接口类甚至Mappi ...

  3. 【C语言】16-预处理指令2-条件编译

    条件编译的概念 在很多情况下,我们希望程序的其中一部分代码只有在满足一定条件时才进行编译,否则不参与编译(只有参与编译的代码最终才能被执行),这就是条件编译. 一.基本用法 1 #if 条件1 2 . ...

  4. java编译自动化

    java编译自动化 http://h2ofly.blog.51cto.com/6834926/1545452?utm_source=tuicool&utm_medium=referral

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

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

  6. [转]如何在 Visual Studio 中使用 Git 同步代码到 CodePlex

    本文转自:http://www.cnblogs.com/stg609/p/3673782.html 开源社区不管在国内还是国外都很火热,微软也曾因为没有开源而倍受指责,但是随着 .Net framew ...

  7. JavaScript操作DOM对象

    js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  8. etcd学习记录

    参考资料: etcd:从应用场景到实现原理的全方位解读 etcd:用于服务发现的键值存储系统 Etcd学习(一)安装和.NET客户端测试 Etcd学习(二)集群搭建Clustering

  9. NV Perf Kit

    https://developer.nvidia.com/gameworksdownload#?dn=perfkit-4-0-0 Title Version Release Date PerfKit  ...

  10. OpenGL extension specification (from openGL.org)

    Shader read/write/atomic into UAV global memory (need manual sync) http://www.opengl.org/registry/sp ...