jQuery高度返回错误的值

Question

我想获取标题和段落的高度值。这样当我更改它们的大小时，我可以设置偏移量以使它们彼此适合，因为它们被设置为绝对值。

我通常会采用不同的方式，但我必须使用绝对位置，因为这是响应式滑块的工作方式。

但是，当我使用 each() 时，它只能在第一张幻灯片（当前幻灯片）上正常工作，但不能在所有其他幻灯片上正常工作。即使幻灯片的大小没有改变，当它们移到一边时。

<div class="slide-content">
    <h2><span class="slide-title"><?php the_title() ?></span></h2>
    <p class="slide-text"><?php echo $text; ?></p>

    <a href="<?php echo get_permalink( $meta["page"] ) ?>" class="da-link">> Jetzt Informieren</a>
</div>

function test() {
    $(".slide-content").each(function() {
        var content = $(this);

        var title = content.find(".slide-title");
        var text = content.find(".slide-text");
        var link = content.find(".da-link");

        var titleheight = title.height();
        var textheight = text.height();

        text.css("top",titleheight+"px");
        link.css("top",titleheight+textheight+"px");

    });
}

这是我的职责。

我得到的值是：

title: 122 text: 54 
title: 164 text: 144 
title: 164 text: 126

第一对是正确的。其他人都错了。所以它只适用于当前幻灯片。 这将根据当前显示的幻灯片而有所不同。幻灯片没有设置为 display:none 当它们移开时，所有的变化都是左边的偏移量。

函数调用如下：

$(window).resize(function () {
        test();
    });

当我使用谷歌浏览器检查时，当舞台的幻灯片移动时元素大小保持不变。

我在 each() 上遇到了很多麻烦。那么这可能是什么？

Answer 1

确保您首先应用了 CSS 重置。

然后在您的 CSS 中，尝试在 'em' 中为标题和段落指定行高。