jQuery 函数在 $(window).resize() 或 $(document).ready() 上执行，但不能同时执行

Question

我写了一个函数来调整一些 <div> 的大小。该函数适用于 $(document).ready() 或 $(window).resize()，但不能同时适用于两者。所以，要么我必须在更改 window 大小时刷新浏览器以更改 div 高度，要么我必须更改 window 大小时然后函数将执行并且 divs 将变为等高。

我的代码如下所示：

function findTallest() {
  var tallestBlock = 0;
  $('.homepageIntroBlocks').each(function() {
    if ($(this).height() > tallestBlock) {
      tallestBlock = $(this).height();
    }
  });

  $('.homepageIntroBlocks').each(function() {
    $(this).height(tallestBlock);
  });
}
$(document).ready(function() {
  findTallest();
  $(window).on('resize', findTallest);
});

.homepageIntroBlocks {
  background-color: green;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <section class="col_3 homepageIntroBlocks" id="notANumberBlock" data-thisBlockText="notANumberBlockText">
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
  </section>
  <section class="col_3 homepageIntroBlocks" id="toHelpYouBlock" data-thisBlockText="toHelpYouBlockText">
    <h3>We're here<br /> to help you...</h3>
  </section>
  <section class="col_3 homepageIntroBlocks" id="whoMadeItBlock" data-thisBlockText="whoMadeItBlockText">
    <h3>We're the people<br /> who made it...</h3>
  </section>
  <section class="col_3 homepageIntroBlocks" id="itsYourEventBlock" data-thisBlockText="itsYourEventBlockText">
    <h3>It's your event,<br /> on us...</h3>
  </section>
</div>

我已经试过this solution，但它有同样的问题。我也试过：

$(window).on('resize', findTallest).trigger('resize');

$(window).on('resize', findTallest).bind('load');

$(window).on('resize load', findTallest);

$(window).load(findTallest);

$(window).resize(findTallest)

$(window).on('load', findTallest).trigger('resize');

但其中 none 有效。我也试过将 $(window).resize() 移到 $(document).ready() 之外，但没有效果。

看起来它在代码段中有效，但那是因为它在文档加载时正在执行。如果你看这个 jsfiddle you can see that it works on load, but if you resize the page then you have to run the snippet again to make the divs resize. You can also see that if you comment out findTallest() like I did in this other jsfiddle 那么当文档加载时 divs 是不同的高度，但是如果你调整浏览器的大小然后函数执行并且 divs 变成相等的高度然后如果你刷新高度重置，他们又是不同的高度。

我也遇到了同样的问题，我编写了一个不同的函数来在页面底部制作页脚。感谢大家的帮助，如果您需要更多信息，请告诉我。

Answer 1

使用 .height(tallestBlock) 设置高度后，所有高度都相同。在函数的开头添加 $('.homepageIntroBlocks').css('height','auto') 以重置高度。

function findTallest() {
  var tallestBlock = 0;
  $('.homepageIntroBlocks').css('height','auto')
  $('.homepageIntroBlocks').each(function() {
    if ($(this).height() > tallestBlock) {
      tallestBlock = $(this).height();
    }
  });

  $('.homepageIntroBlocks').each(function() {
    $(this).height(tallestBlock);
  });
}
$(document).ready(function() {
  findTallest();
  $(window).on('resize', findTallest);
});

https://jsfiddle.net/SeanWessell/9L1zxs8f/

jQuery 函数在 $(window).resize() 或 $(document).ready() 上执行，但不能同时执行

jQuery function executes on $(window).resize() or $(document).ready() not both

javascript

jquery

resize