Question

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

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

Answer 1

尝试在代码周围包装$(function() { ... your code ... }以在加载页面时运行代码。同时在console.log("test")内尝试same_height()以检查该函数是否在所有

运行

Answer 2

This可能是它的原因。我猜想on（'resize'）方法只在你开始调整屏幕大小时才会触发，而你希望它在你完成调整大小时触发。

在this帖子中还有一些可能非常有用的答案。

Answer 3

试试这个：

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

Answer 4

可能是你的问题来自HTML结构。因为你的代码就像魅力一样:)

<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>

如果结构正常，您的脚本将执行以下操作：

将每个owl-item的高度设置为特定值
在调整大小事件时，您将查询此值，即之前设置的值

但你真正需要的是：

将每个owl-item的高度设置为特定值
在调整大小事件时，首先删除此高度（设置所需内容自动高度）
```
      $(this).css('height','auto')
```
现在再次查询身高

查看更新后的JSfiddle

https://jsfiddle.net/q4p79hw5/9/

使元素具有相同的高度不适用于调整大小

4 个答案: