Question

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

我的代码如下所示：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

我尝试了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');

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

看起来它正在片段中工作，但这是因为它在文档加载时正在执行。如果您查看此jsfiddle，您可以看到它在加载时有效，但如果您调整页面大小，则必须再次运行该代码段以使div调整大小。您还可以看到，如果您像this other 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/

jQuery函数在$（window）.resize（）或$（document）.ready（）上执行，而不是两者都执行

1 个答案: