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");
 	}););
时间: 2024-08-27 09:36:41

rank 和 星星评级的相关文章

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

点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

Cocos2d-x未上线手游《魔幻积木》源代码 “开源” win32+安卓+iOS三合一

郝萌主倾心贡献,尊重作者的劳动成果,转载请注明出处 From郝萌主. 如果文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额随意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源码下载:点我传送 游戏简介: 魔幻积木是一款积木搭建游戏,超级耐玩有趣,很经典的一款重力类物理小游戏. 在每个关卡,会提供给你各种形状的积木,你要将这些积木合理的摆放在平台上: 全部积木堆积平衡,达到一定的时间,即可进入下一关. 游戏的物理效果做得相当不错,因此玩家每次摆放方块时需要格外小心, 一旦有方块掉

前端开源项目周报0328

由OpenDigg 出品的前端开源项目周报第十四期来啦.我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等.react-overdrive 超级简单的神奇移动过渡 moveTo 轻量级滚动动画js库 react-springy-parallax 有弹性的可组合的视差滚动 vue-163-music vue仿网易云音乐客户端版 unvue 使用简单的通用VueJS应用 smitty 基于mitt的小巧的flux实现 HyperM

关于inline-block的间隙问题

很久之前写过一个星星评级的样式,当时开发人员在嵌套代码的时候出现很多问题,同样的一个样式有的页面正常有的页面就出现星星错位的问题,仔细研究了一下代码,发现问题原来出在了inline-block上. 目标样式:评级星星 实现手段:<span class="star"><span class='star1'></span></span> 相应样式:.star给一个灰色星星背景,display:inline-block使其支持宽高:.star1

夺命雷公狗---DEDECMS----32dedecms电影网评价星星功能的实现

我们要完成的是电影网的评价功能: 我们要做这个功能前,就要让前期工作准备好,首先让鼠标移动到星星时,星星的左边都是黄色的星星右边还是灰星星. 我们打开内容页的模版看下他代码是如何组成的: 我们在这里可以很清晰的看得到他是通过二十张图片而组成的,所以我们首先将所有的星星都绑定一个鼠标移动事件,onmouseover, 写这个功能前必须要先引入jquery库,如下所示: 然后用id选择器将他绑定,如下所示: 然后在后台更新下文章页模版, 让后就将鼠标放到星星头上看下有没弹出OK,如果弹出证明我们的绑

夺命雷公狗---ECSHOP---08---商品页的拇改成星星

<strong>用户评价:</strong> {*---------商品评价星星开始----------*} <img src="./images/stars{$goods.comment_rank}.gif" alt="comment rank {$goods.comment_rank}"> {*---------商品评价星星结束-------*} 这里主要是要有星星的图片即可, 最终实现效果如下:

java初学打印星星以及九九乘法表

Java中打印星星,就是为了让初学者熟悉和掌握循环的使用方法: 给定一个图形如: * *** ***** ******* 第一种方式:由循环输出各个部分,再结合起来 for(int i=1;i<=4;i++){< p=""> for(int j=1;j<=7-i;j++){< p=""> system.out.print(" "); } for(int j=1;j<=2*i-1;j++){< p=&

LeetCode:Rank Scores - 按分数排名次

1.题目名称 Rank Scores(按分数排名次) 2.题目地址 https://leetcode.com/problems/rank-scores/ 3.题目内容 按分数排名次,如果两个Id的分数一样,那么他们的名次是一样的,排名从1开始.注意,每组分数的名次,都是上一组分数名次加一. 例如,有这样一组数据: +----+-------+ | Id | Score | +----+-------+ | 1  | 3.50  | | 2  | 3.65  | | 3  | 4.00  | | 

【学习排序】 Learning to Rank 中Listwise关于ListNet算法讲解及实现

前一篇文章"Learning to Rank中Pointwise关于PRank算法源码实现"讲述了基于点的学习排序PRank算法的实现.该篇文章主要讲述Listwise Approach和基于神经网络的ListNet算法及Java实现.包括: 1.基于列的学习排序(Listwise)介绍 2.ListNet算法介绍 3.ListNet算法Java实现 LTR中单文档方法是将训练集里每一个文档当做一个训练实例,文档对方法是将同一个查询的搜索结果里任意两个文档对作为一个训练实例,文档列方法