Question

我创建了2个响应式框，第一个框内部有一个图片，另一个框文本。两者都有宽度：50％;和第一个盒子高度：100％。但是..每当我调整窗口大小时，我希望第2个框的高度与第1个框的高度相同。

我创建了这个jquery并且它可以工作，但是当我调整窗口大小时它不起作用。我认为解决这个问题的方法可能是每当我调整窗口大小时执行jquery，但我不知道怎么做。这就是我所做的：

<script>
var Box = $('.theElement');
$('.theElement2').css({ height: Box.height() });
</script>

谢谢你的建议！最终解决方案如下所示：

var Box = $('.theElement');

$(window).load(function() {
$('.theElement2').css({ height: Box.height() });
});

$(window).resize(function() {
$('.theElement2').css({ height: Box.height() });
}).resize();

注意：我必须引入加载函数，因为当我刷新页面时，jquery有时会起作用，有时它不会。现在它完美无缺！

Answer 1

使用resize事件：

$(window).resize(function() {
    var Box = $('.theElement');
    $('.theElement2').css({ height: Box.height() });
}).resize();

Answer 2

你可以做的是在函数中包装高度的设置，然后在DOM就绪以及窗口调整大小事件时调用它：

$(function() {
    var setHeight = function() {
        var Box = $('.theElement');
        $('.theElement2').css({ height: Box.height() });
    });

    // Run on DOM ready
    setHeight();

    // Run on window resize
    $(window).resize(setHeight);
});

一些优化后见之明：如果正在同时执行许多计算，您可能需要考虑限制resize事件。浏览器经常过于频繁地触发事件;）

如何使元素采取另一个元素高度

2 个答案: