如何解决JQUERY-来自相同类别元素的特定值
| 编辑:昨晚我真的很累,并且将jQuery写错了,\ .readMore \始终是其各自div动画的触发器。我道歉。 大家好, 我想从具有相同类的元素中提取特定信息。我有多个包含不同数量文本的div,因此它们的高度也有所不同。但是,我将与这些div关联的类设置为200px的高度。在每个div的底部,我都有一个绝对定位的锚点,使读者可以将div扩展(动画化)到其自动/自然高度。 我想做的是找出具有相同类的div的'auto'高度,将其存储起来,然后稍后在单击各个div的锚点时调用它。到目前为止,我一直只获得一个价值或没有价值,而我希望所有价值。 我最近一直在使用.each(),但无济于事。真正的问题似乎是对div进行动画处理,否则就没有问题。只需使用.css()将高度设置为自动。如果您可以将自己的身高设置为自动,这将容易得多。希望我能正确解释自己。无论如何,这是我的代码。 的HTML<div class=\"stretch\">
text
<a class=\"readMore\">Read More</a>
</div>
<div class=\"stretch\">
text
<a class=\"readMore\">Read More</a>
</div>
<div class=\"stretch\">
text
<a class=\"readMore\">Read More</a>
</div>
的CSS
div.stretch {height:auto; width:100%; overflow:hidden; position:relative}
a.readMore {position:absolute; left:0; bottom:0;}
jQuery查询
$divheight = //stored height of divs
$allheight = $divheight + 100; //extra space to clear the anchor
$(\".h200\").height(200);
$(\".stretch\").addClass(\"h200\"); //change height later,to be able to refer to automatic/natural height
$(\".readmore\").toggle(
function(){
$(this).parent(\'div\').animate({height:$allheight},750);
$(\".readMore\").text(\"Read Less\");
},function(){
$(this).parent(\'div\').animate({height:\"200px\"},250);
$(\".readMore\").text(\"Read More\");
}
)
谢谢前进,即使您看一眼,我也非常感谢。
解决方法
尝试这个:
$hiddenheight=200;
$extraspace=100;
$(\".stretch\")
.each(function(){
$(this).data(\'actualheight\',$(this).outerHeight()+$extraspace).css(\'height\',$hiddenheight+\'px\'); //outerHeight for including padding+margin+border,if any
})
.toggle(
function(){
$(this).animate({height: $(this).data(\'actualheight\')+\'px\'},750);
$(\".readMore\").text(\"Read Less\");
},function(){
$(this).parent(\'div\').animate({height:$hiddenheight+\"px\"},250);
$(\".readMore\").text(\"Read More\");
}
)
根据需要调整高度值。
, $ .height()将返回元素的实际高度。储存它,在叫ѭ4re时重新使用。
像这样:
$(\".stretch\").toggle(
function(){
$(this).data(\'oh\',$(this).height());
$(this).animate({height: 200},750);
},function(){
$(this).animate({height: $(this).data(\'oh\')},250);
$(this).data(\'oh\',null);
}
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。