Question

我有一个函数可以调整元素的大小/均衡，使它们的大小相同。我在DOM Ready上调用该函数，我也希望在窗口调整大小时调用它，但它似乎没有被触发。 console.log会像您期望的那样触发，但不会触发equalize()函数。

// Equalize
var equalize = function(){
  var maxHeight = 0;
  $('.equalize').each(function(){
    if ($(this).outerHeight() > maxHeight) { maxHeight = $(this).outerHeight(); }
  });

  $('.equalize').outerHeight(maxHeight);
};


jQuery( document ).ready(function( $ ) {

  // fire equalize
  equalize();

  $(window).resize(function(){
    equalize();
    console.log('[Log] Resized');
  }).trigger('resize');

});

在窗口调整大小时触发功能时，我是否遗漏了一些内容？谢谢！

Answer 1

对于要调整大小以使其适合内容的元素，必须设置样式overflow : auto，否则元素只保持其大小并且内容溢出。

此外，当您明确设置outerHeight时，元素会停止自动调整大小以适应内容，必须应用auto的默认高度才能在元素高度之前将其设置为调整大小比较

var equalize = function() {
    var max = Math.max.apply(null, 
                $('.equalize').css('height', 'auto').map(function() {
                    return $(this).outerHeight();
                })
              );
    $('.equalize').outerHeight(max);
};


jQuery(document).ready(function($) {
    $(window).resize(function() {
        equalize();
    }).trigger('resize');
});

div{
  display: inline-block;
  position: relative;
  width: 50%;
  float: left;
  background: yellow;
}

.other{
  background: salmon;
  overflow:auto;
}

FIDDLE

Answer 2

摆脱触发器，看看是否有帮助。根据jQuery doc，触发器触发even（调用函数）

我认为在调用函数之后调用函数是有意义的，然后再次触发它，然后它应该永远继续......可能是问题的原因。

// Equalize
var equalize = function(){
  var maxHeight = 0;
  $('.equalize').each(function(){
    if ($(this).outerHeight() > maxHeight) { maxHeight = $(this).outerHeight(); }
  });

  $('.equalize').outerHeight(maxHeight);
};


jQuery( document ).ready(function( $ ) {

  // fire equalize
  equalize();

  $(window).resize(function(){
    equalize();
    console.log('[Log] Resized');
  }); // got rid of the trigger...not needed

});

Answer 3

如果没有关于项目中发生的事情的更多详细信息，有点难以说明，但这对我有用（至少在窗口调整大小时可以平等）：

var equalize = function(){
  var maxHeight = 0;
  $('.equalize').each(function(){
    if ($(this).outerHeight() > maxHeight) { maxHeight = $(this).outerHeight(); }
  });

  $('.equalize').outerHeight(maxHeight);
};


jQuery( document ).ready(function( $ ) {
  equalize();

  $(window).resize(function(){
    equalize();
    console.log('[Log] Resized');
  })

});

窗口调整大小的Fire函数

3 个答案: