Div всегда совпадает друг с другом, даже когда окно / внешний div меняются - PullRequest
Новая
       14

Div всегда совпадает друг с другом, даже когда окно / внешний div меняются

0 голосов
/ 21 июня 2019

Я пытаюсь подобрать высоту каждого слайда на основе самого высокого.Я вижу, что могу использовать «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>

Ответы [ 2 ]

0 голосов
/ 22 июня 2019

Я поставил функцию изменения размера после, но почему-то она не работала, когда я изменял размер окна..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);
});
0 голосов
/ 21 июня 2019

Я бы предложил вам использовать встроенные методы jQuery.

  1. В вашем HTML есть id="highest", но вы пытаетесь получить к нему доступ через имя класса в вашем JavaScript. Правильный способ доступа к <div> с помощью id с помощью jQuery: $('#highest').
  2. Чтобы получить доступ к высоте слайда, используйте функцию externalHeight jQuery (которая включает заполнение элемента): $('#highest').outerHeight();. jQuery externalHeight function
  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(). Это повторяет код, выполняемый при первой загрузке документа. Чтобы убедиться, что высота элемента #highest не изменяется (но остается шириной его содержимого, я добавил селектор :not() , чтобы установить только высоты других <div> с.

...