JQUERY - 来自同一类元素的特定值

Question

编辑：我昨晚真的很累，并且写错了我的 jQuery，“.readMore”始终是其各自 div 动画的触发器。抱歉。

大家好，

我想从同一类的元素中提取特定信息。我有多个包含不同数量文本的 div，因此它们的高度也不同。但是，我已将与这些 div 关联的类的高度设置为 200px。在每个 div 的底部，我有一个绝对定位的锚点，它允许读者将 div 扩展（动画）到它的自动/自然高度。

我想做的是找出具有相同类的 div 的“自动”高度，存储它，然后在单击相应 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");
    }
)

提前感谢您，我真的很感谢您看一下。

Answer 1

试试这个：

$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");
    }
)

根据需要调整高度值。

Answer 2

$.height() 将返回元素的实际高度。存储它，在调用hide时重新使用它。

就像这样：

$(".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);
    }
)