jQuery函數在$（window）.resize（）或$（document）.ready（）上執行

Question

我寫了一個函數來調整某些<div>的大小。 該函數可在$(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的高度相等，然后如果刷新高度重置，它們又變為不同的高度。

我在編寫用於在頁面底部創建頁腳的其他函數時也遇到了相同的問題。 感謝您的幫助，如果需要更多信息，請告訴我。

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/