如何计算每个元素的高度并将这些值用作函数中的变量？
我正在尝试创建一个简单的文本手风琴，计算每个面板的高度并将此值作为变量返回。 我可以使用if语句获取值，如if ( i === 0 ) { $(this).height(); } 但是无法将此变量传递给外部。 我可以在不使用变量的情况下做到这一点，但长期来看它变得毫无用处。
Brıefly：我想计算每个元素的height并在click函数中使用这个变量。
这是jsFiddle包含问题。
var panel = $('.holder div'); var trigger = $('a'); panel.each(function(i) { //problem starts when i try to calculate each ele's height var eachEleHeight = i.height(); trigger.click(function() { $(this).prev('div').animate({'height':eachEleHeight+'px'},500); //this works widthout var eachEleHeight but became useless //$(this).prev('div').animate({'height':'300px'},500); }); //this is for hiding text at doc.ready panel.css('height','56px'); });
如果我很好理解，试试这个：
panel.each(function(i, el) { // create a reference to te current panel var $el = $(el); // execute a function immediately, passing both the panel and its height (function(p, h) { // the trigger is targeted as the next link after the current panel p.next('a').click(function() { p.animate({ height : h + 'px'},500); }); }($el, $el.height())); // set each panel height $el.css('height','56px'); });
示例小提琴： http ： //jsfiddle.net/Aw39W/55/
您发布的代码存在问题。 i是当前元素的索引。 不是元素本身。
尝试var eachEleHeight = $(this).height();
小提琴
您使用的事件序列似乎有点奇怪。 您实际上是将click事件绑定到每个panel元素的所有标记。 试试这个： 小提琴
我只是使用min-height和max-height css属性来存储初始到/来自高度变量。 这将自动为您提供起始高度。
如果我理解了这个问题，你想拥有手风琴动画function的元素高度。 这是一个技巧，但它的工作原理。 我经常使用Mootools，所以我会用它来写。 你应该能够搞清楚。
var orgHeight = i.offsetHeight; i.setStyle('height','100%'); var eachEleHeight = i.offsetHeight; i.setStyle('height',orgHeight);
基本上你会翻转元素以显示它的高度并在文档有时间将其翻转到屏幕上之前将其翻转。
不确定这正是你想要的，但希望它有所帮助。