码迷,mamicode.com
首页 > 其他好文 > 详细

rank 和 星星评级

时间:2016-01-27 12:22:06      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享

这样的效果有几种方法

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 和 星星评级

标签:

原文地址:http://www.cnblogs.com/liangcheng11/p/5162414.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!