javascript - 如何在窗口调整大小时为等高子项重新加载 div

Question

我写了一个脚本来为 wrapper 的子元素提供相同的高度。它在页面加载时工作正常，但当我调整 iPad 的大小或更改方向时，高度保持与页面加载期间相同。

$(window).on('load resize', function () {
     $('.equal-height-wrapper').each(function () {
     var heightArray = [];
     var allbox = $(this).find(".equal-height-box");
     $(allbox).each(function () {
     heightArray.push($(this).height());
     });
     var maxBoxHeight = Math.max.apply(Math, heightArray);
     $(this).find('.equal-height-box').css('height', maxBoxHeight);
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="equal-height-wrapper">
  <div class="inner-wrapper">
    <div class="equal-height-box">

    </div>
    <div class="equal-height-box">

    </div>
  </div>
</div>

我想在子元素改变时更新它们的高度。到目前为止，我已经添加了 overflow hidden，以便隐藏任何重叠的文本。

我尝试将此脚本用于加载调整大小，但没有任何区别。

Answer 1

将代码包装在命名函数中，以便您可以通过多种方式调用它。我会将窗口 .load 替换为 $.ready。还添加了 orientationchange 事件。然后你会得到类似的东西:

function setEqualHeight() {
  $('.equal-height-wrapper').each(function() {
    var heightArray = [];
    var allbox = $(this).find(".equal-height-box");
    $(allbox).each(function() {
    $(this).height("");  // remove previously set heights
    heightArray.push($(this).height());
    });
    var maxBoxHeight = Math.max.apply(Math, heightArray);
    $(this).find('.equal-height-box').css('height', maxBoxHeight);
  });
}

$(function() {
  $(window).on('resize', setEqualHeight);
  $(window).on('orientationchange', setEqualHeight);
  setEqualHeight();
});