$（窗口）.resize（）不起作用

我有以下jquery代码来调整一组元素的大小，使它们与最高元素的高度相同。 刷新屏幕时该function正常，但$（窗口）.resize（）似乎不起作用。

jQuery(document).ready(function($) { function equal_height(target) { var maxHeight = -1; $(target).each(function() { maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); }); $(target).each(function() { $(this).height(maxHeight); }); }; var responsive_viewport = $(window).width(); if (responsive_viewport >= 768) { equal_height('.cta-text'); $(window).resize(function() { equal_height('.cta-text'); }); } }); 

Answer 1

我会考虑重构来分离你的function和事件。 此外，您正在检查document准备就绪的窗口，此时窗口对象尚未加载任何内容（在窗口呈现之前DOM已准备就绪）。 试试这个：

 jQuery(window).load(function($) { var responsive_viewport = $(window).width(); if (responsive_viewport >= 768) { equal_height('.cta-text'); $(window).resize(function() { equal_height('.cta-text'); }); } }); function equal_height(target) { var maxHeight = -1; $(target).each(function() { maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); }); $(target).each(function() { $(this).height(maxHeight); }); }; 

我还应该提一下，因为你的resize函数在条件语句中，它只会在视口大于768像素时触发 – 因此请确保在调试时考虑到这一点。

Answer 2

搞定了！

问题不在于如何或何时调用函数，它不起作用，因为它基于新函数运行时第一次设置的大小。

我已经将它添加到equal_height函数的开头，将元素的高度重置为它的自然高度。

 $(target).each(function() { $(this).height('auto'); }); 

Answer 3

使用$(window).resize(function(){}); 在resize时触发事件。 它仅在您刷新时才起作用，因为您当前没有告诉它在resize时运行任何内容，而是在文档完全加载并准备就绪时。