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

【问题标题】：JQUERY - Specific values from same class elementsJQUERY - 来自同一类元素的特定值
【发布时间】：2011-05-28 20:07:33
【问题描述】：

编辑：昨晚我真的很累，把我的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");
    }
)

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

【问题讨论】：

你是否在 div 上设置了overflow 属性？
@Salman A 是的，我设置为overflow:hidden

标签： jquery class height each

【解决方案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");
    }
)

根据需要调整高度值..

【讨论】：

这几乎可以工作。只有一个问题，$hiddenheight 不会在文档就绪时产生，并且在第一次切换时会导致 css 警告。

【解决方案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);
    }
)

【讨论】：