Uncaught ReferenceError: maxHeight не определен

Question

jQuery

$(function maxHeight() {
  var maxH = 0;
  var contentH = 'calc(100vh - 79px)';
  $(".left, .middle, .right").each(function() {
    if ($(this).height() <= contentH) {
      $(".left, .right").css('justify-content', 'space-between');
      $(".middle").css('height', '100%');
    } else {
      if ($(".middle").height() > $(".left, .right").height()) {
        $(".left, .right").css({
          'height':'calc(' + contentH + ' - 100px)',
          'justify-content':'space-between'
      });
        $(".middle").css('height',contentH);
      } else {
        maxH = $(".left, .right").height();
        $(".left, .middle, .right").height(maxH);
      }
    }
  });
});
mySwiper.height = maxHeight();

Ошибка говорит: Uncaught ReferenceError: maxHeight не определено
Что не так с моим кодом?

edit : Я разделил вопросы, которые я первоначально написал здесь.-> Код, соответствующий высоте 3 элементов в JS, это правильно?- StackOverflow

Answer 1

Удалите $ () вокруг вашей функции.

Answer 2

Ваша функция в настоящее время является локальной функцией внутри сокращения jQuery $(document).ready(), равного $(/*function*/), поэтому она недоступна извне этой функции.Сделайте это нормальной функцией:

function maxHeight() {
  var maxH = 0;
  var contentH = 'calc(100vh - 79px)';
  $(".left, .middle, .right").each(function() {
    if ($(this).height() <= contentH) {
      $(".left, .right").css('justify-content', 'space-between');
      $(".middle").css('height', '100%');
    } else {
      if ($(".middle").height() > $(".left, .right").height()) {
        $(".left, .right").css({
          'height':'calc(' + contentH + ' - 100px)',
          'justify-content':'space-between'
      });
        $(".middle").css('height',contentH);
      } else {
        maxH = $(".left, .right").height();
        $(".left, .middle, .right").height(maxH);
      }
    }
  });
}
mySwiper.height = maxHeight();

Answer 3

Вот скрипка с базовой реализацией - https://jsfiddle.net/3tuvzxwd/1/

Добавьте display: flex; flex-direction: row в родительский контейнер, и он будет работать