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

错误提示：未捕获ReferenceError：未定义maxHeight
我的代码有什么问题？

编辑：我对我最初在这里写的问题进行了划分。 -> Code to match the height of the 3 elements in JS, is this correct? - StackOverflow

Answer 1

删除函数周围的$（）。

Answer 2

您的函数当前是$(document).ready()的jQuery $(/*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，它将起作用

未捕获的ReferenceError：未定义maxHeight

3 个答案: