如何计算每个元素的高度，并使用这些值作为函数的变量？(How to calculate each e

我想创建一个简单的文本手风琴其计算每个面板的高度，并返回该值作为变量。 我能得到的值与if语句一样if ( i === 0 ) { $(this).height(); } if ( i === 0 ) { $(this).height(); }但是不能把这个变量到外面。 我可以做到这一点不使用变量，但它在长期变得无用。

简单地说：我要计算每个元素的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');
});​

Answer 1:

如果我很好理解，试试这个：

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/

Answer 2:

有与您发布的代码中的问题。 i是当前元素的索引。 不是元素本身。

尝试var eachEleHeight = $(this).height();

小提琴

Answer 3:

你使用过的事件顺序似乎有点不可思议。 你点击事件实际上结合所有的a每个标签panel元素。 试试这个： 小提琴

我只是用min-height和max-height的CSS属性来初始到/从存储高度变量。 这会自动让你的起点高度。

Answer 4:

如果我理解的问题，你想拥有手风琴动画功能元素的高度。 这是一种伎俩，但它的工作原理。 我经常使用Mootools的，所以我会用它写字。 你应该能够找到答案。

var orgHeight = i.offsetHeight;
i.setStyle('height','100%');
var eachEleHeight = i.offsetHeight;
i.setStyle('height',orgHeight);

从本质上讲，你会被翻转，露出它的元素的高度和翻转回来文档有时间把它显示在屏幕上了。

不知道这正是你要找的，但希望它帮助。

文章来源: How to calculate each element's height and use these values as a variable in function?