0

我试图根据最高的一张来匹配每张幻灯片的高度。我看到我可以使用“offsetHeight”，但那是代码加载时的一组高度。我想在窗口/外部 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>

4

2 回答 2

0

我之后放了一个调整大小的功能，但是当我调整窗口大小时它不知何故不起作用。.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);
});

于 2019-06-21T21:15:36.753 回答
0

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

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

如果您不将其用于其他元素，.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>

编辑

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

于 2019-06-21T19:18:34.367 回答