昨天在做一个简单的遮罩功能,说简单不如说是繁琐的好,主要是因为一个页面中有将近十几个,只不过是功能是一样的,要将一段文字遮盖住,文字的内容是不确定的,也就是跟着内容的高度变化而改变遮罩层的高度。了解了之后确定将内容的父元素的高度设置为遮罩层的高度。
var $blueH = $('.blue').height(); //内容的父元素的高度
var $indexs = $(".indexs"); //遮罩层
$(this).find($indexs).show().height($blueH);
完事,测试
出来是出来了,但这个高度明显不对啊,多也遮罩弹出的高对都是一样的252px,所有的都是一样,为什么,怎么回事,还是这个数字,怎么不是其他的,满脑子的疑问,结构也没错啊,
换个思路,换成内容的祖先元素,还是一样的,高度不变。??????在搞了n个小时之后发现了,原来是第一个内容的父元素是252px,那么取值自然也是252px,后面的其他元素并不是,但是,$blueH却始终以第一位准,后面的并没有覆盖前面的,自然遮罩层的高度不会有变化了,最后写成了这样
$(this).find($indexs).show().height($(this).find($(".blue")).height());
$(this)在Jquery中指的是当前元素,第一$(this)就是指鼠标当前经过的元素,那么第二个$(this)自然也是指当前内容的父元素的高度了。