Javascript 使图元具有相同的高度对调整大小不起作用

我使我的元素处于相同的高度，一切正常（它在页面加载时工作），但在调整大小时不起作用。需要你的帮助吗

function same_height() {
         $('.front-section').children(".row").each(function() { 
          var maxHeight= -1;
          $(this).find(".owl-item").each(function() {
           maxHeight = maxHeight > $(this).height() ? maxHeight : 
            $(this).height();
          });
           $(this).find(".owl-item").each(function() {
             $(this).height(maxHeight);
         })
        });  
       }
     $(window).on('load',same_height);        

     $(window).on('resize',same_height);

尝试将

$（function（）{…your code…}

包装在代码周围，以便在加载页面时运行代码。还可以尝试将

控制台.log（“test”）

放入

相同高度（）

中，检查函数是否运行可能是其原因。我猜是on（'resize'））方法仅在您开始调整屏幕大小时触发，而您希望它在您完成调整大小时触发

线程中还有一些可能非常有用的答案。

试试这个：

function same_height() {
    $('.front-section').children(".row").each(function() {
        var maxHeight = -1;
        $(this).find(".owl-item").each(function() {
            maxHeight = maxHeight > $(this).height() ? maxHeight :
                $(this).height();
        });
        $(this).find(".owl-item").each(function() {
            $(this).height(maxHeight);
        })
    });
}
$(window).on('load resize', window.setTimeout(same_height, 1));

---

可能是您的问题出在HTML结构上。因为您的代码很有魅力：）

现在再次查询高度

请参阅更新的JSFIDLE

---

不清楚你在问什么，或者问题是什么。你能更清楚地解释一下你想做什么吗$（window）.on（'resize'，相同的高度）；这不起作用，它在调整大小时调用相同的高度方法吗？在调整大小时，它与您在调整大小时尝试的内容包装保持一致吗？到那时，您已经在所有元素上设置了固定的高度，所以它不会改变。查看其他用于在多个元素之间设置相同高度的选项，例如CSS flexbox。像这样吗$（function（）{$（window）.on（'load'，same_height）；$（window.on（'resize'，same_height）；}）；还是完整代码？是的，试试看。该函数是否在页面加载时启动？如果是这样，请检查下面@garroad\u ran的答案，在

相同高度的
函数中写入
console.log（“test”）
，并检查其是否写入控制台，但仅在调整大小开始时有效，当我开始调整它的大小时，改变高度并保持不变。@Evi：在这种情况下，它肯定与您正在使用的插件有一些依赖关系。尝试阅读插件选项和方法。很可能你会发现一些
refresh
函数可以做到这一点。我在没有猫头鹰转盘的情况下尝试了这段代码，结果是一样的。它可以工作，但只有在“开始调整大小”时，当我开始调整窗口大小时，它会改变高度并保持不变。@Evi：在这种情况下，请检查CSS中的
.font部分
，
.row
等父容器。其他因素正在限制它。不，每1px更改一次，就会触发调整大小事件。但是，浏览器优化了它，并没有为每个像素触发它，而是具有调整大小的速度。因此，最好使用
window.setTimeout
调整大小或滚动事件。好了，开始吧！显示了我所知道的。它是一样的，只在开始调整大小时显示高度。在您的浏览器中是否有不同的方式？谢谢您在线创建）如果我调整这个JSFIDLE演示的大小，它会正确地调整框的大小，不是吗？不，不会。将长文本放在红色div上，并开始调整窗口大小。它总是显示150px.Åh，现在我明白你的问题了。我将很快更新我的答案。
<div class="front-section">
  <div class="row">
    <div class="owl-item red">first row</div>
    <div class="owl-item green">first row</div>
    <div class="owl-item blue">first row</div>
  </div>
</div>

      $(this).css('height','auto')