0

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

我通常会以不同的方式执行此操作,但我必须使用绝对位置来执行此操作,因为这是响应式滑块的工作方式。

但是,当我使用 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() 上遇到了很多麻烦。那么这可能是什么?

4

1 回答 1

0

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

然后在您的 CSS 中,尝试在“em”中为标题和段落提供行高。

于 2013-03-04T12:08:36.303 回答