Question

我正在尝试创建一个简单的文本手风琴，它计算每个面板的高度并将此值作为变量返回。我可以使用if ( i === 0 ) { $(this).height(); }这样的if语句获取值，但无法将此变量传递到外部。I can do this without using variable but it became useless in long term.

Brıefly：我想计算每个元素的height并在click函数中使用此变量。

Here is jsFiddle which includes the problem.

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();

<强> Fiddle

Answer 3

如果我理解了这个问题，你想拥有手风琴动画功能的元素高度。这是一个技巧，但它的工作原理。我经常使用Mootools，所以我会用它来写。你应该能够搞清楚。

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

基本上你会翻转元素以显示它的高度并在文档有时间将其翻转到屏幕上之前将其翻转。

不确定这正是您所寻找的，但希望它有所帮助。

Answer 4

您使用的事件序列似乎有点奇怪。您实际上是将点击事件绑定到每个a元素的所有panel标记。试试这个：Fiddle

我刚使用min-height和max-height css属性来存储初始到/来自高度变量。这将自动为您提供起始高度。

如何计算每个元素的高度并将这些值用作函数中的变量？

4 个答案: