jQuery函数在$(window).resize()或$(document).ready()上执行,而不是两者都执行

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

本文关键字:执行 两者都 函数 window resize document jQuery ready      更新时间:2023-09-26

我编写了一个函数来调整一些<div> s的大小。该函数适用于$(document).ready()$(window).resize(),但不能同时适用。因此,当我更改窗口大小以更改div高度时,我必须刷新浏览器,或者我必须更改窗口大小,然后函数将执行,div将变为等高。

我的代码如下:

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>

我试过这个解决方案,但它也有同样的问题。我也试过:

$(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');

但它们都没有奏效。我也尝试过将$(window).resize()移到$(document).ready()之外,但没有效果。

它看起来像是在代码段中工作,但这是因为它是在加载文档时执行的。如果你看看这个jsfiddle,你可以看到它在加载时可以工作,但如果你调整页面的大小,那么你必须再次运行这个片段来调整div的大小。你还可以看到,如果你像我在另一个jsfiddle中那样注释掉findTallest(),那么当文档加载时,div的高度是不同的,但如果你调整浏览器的大小,那么函数就会执行,div变为相等的高度,然后如果你刷新高度重置,它们再次变为不同的高度。

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

使用.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/