Div 即使在 window/outer div 发生变化时也始终相互匹配

Question

我试图根据最高的一张来匹配每张幻灯片的高度。我看到我可以使用“offsetHeight”，但这是代码加载时的一组高度。我想在 window/outer div 更改时使其可修复（我在外部使用 flexbox）

$(document).ready(function() {
  var offsetHeight = document.getElementsByClassName('highest').offsetHeight;
  $('carousel > div').style.height = offsetHeight + 'px';
});

.carousel-wrap {
  display: flex;
  flex-wrap: wrap;
}

.carousel>div {
  background-color: #E3E3E3;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-wrap">
  <div class="carousel">
    <div class="band slide1">1</div>
    <div class="band slide2" id="highest">2 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.</div>
    <div class="band slide3">3</div>
  </div>
</div>

Answer 1

我建议您使用 jQuery 的内置方法。

在您的 HTML 中您有 id="highest" 但您试图通过 JavaScript 中的 class 名称访问它。使用 jQuery 访问 <div> 及其 id 的适当方法是 $('#highest').
要访问幻灯片的高度，请使用 jQuery 的 outerHeight 函数（包括元素的填充）：$('#highest').outerHeight();。 jQuery outerHeight function
正如 weegee 评论的那样，添加一个“.”在 jQuery 中的轮播之前。然后您可以使用 $('.carousel > div').outerHeight(offsetHeight);.

如果您不将其用于其他元素，您也可以考虑使用 class .band 而不是 .carousel > div。

$(document).ready(function() {
  var offsetHeight = $('#highest').outerHeight();
  $('.carousel > div:not(#highest)').outerHeight(offsetHeight);
  
  $(window).resize(function() {
    var offsetHeight = $('#highest')[0].scrollHeight;
    $('.carousel > div:not(#highest)').outerHeight(offsetHeight);
  });
});

.carousel-wrap {
  display: flex;
  flex-wrap: wrap;
}

.carousel > div {
  background-color: #E3E3E3;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-wrap">
  <div class="carousel">
    <div class="band slide1">1</div>
    <div class="band slide2" id="highest">2 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.</div>
    <div class="band slide3">3</div>
  </div>
</div>

编辑

为了让元素的高度随着 window 大小的变化而更新，我向脚本添加了一个 .resize() 回调。这将重复文档首次加载时执行的代码。为了确保 #highest div 的高度不变（但保持其内容的宽度，我添加了 :not() selector 来仅设置其他 <div>s.

Answer 2

我在后面放了一个调整大小的函数，但是当我调整 window 的大小时它不起作用。 .carousel .band 没有清空行内高度，换了一个。

$(document).ready(function() {
  var offsetHeight = $('#highest').outerHeight();
  $('.carousel .band').outerHeight(offsetHeight);
});

$( window ).resize(function() {
  var offsetHeight = $('#highest').outerHeight();
  $('.carousel .band').css('height','auto').outerHeight(offsetHeight);
});

Div 即使在 window/outer div 发生变化时也始终相互匹配

Div always matching each others even when window/outer div change

javascript

offsetheight