重新运行窗口调整高度的脚本？答案

【问题标题】：Rerun script for height on window resize?重新运行窗口调整高度的脚本？
【发布时间】：2012-10-10 15:38:33
【问题描述】：

我将元素“.portfolio-set-height”的高度设置为所有这些元素的最高高度（它们具有不同的高度），然后我将此高度用作另一个元素的最小高度。随附的代码适用于此。但是当窗口调整大小时，我无法让 jquery 重新运行脚本。有什么想法吗？

（我已经尝试过$(window).resize(function()，但没有成功）

$(document).ready(function() {
   var maxHeight = -1;

   $('.portfolio-set-height').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.portfolio-set-height').each(function() {
     $(this).height(maxHeight);
   });
 });


$(document).ready(function() {
  $(".work-slider").css("min-height", function(){ return $(".portfolio-set-height").height() });
});

【问题讨论】：

你能解决你的问题吗？有已知问题，但我不会尝试在没有代码的情况下猜测哪一个适用。
您可以将所有功能放在一个文档中随时调用..

标签： jquery resize reset

【解决方案1】：

您在 $(document).ready 中指定的函数是本地可用的。当 $(document).ready once 被触发时，代码无法从外部访问。您应该在 $(document).ready() 之外指定方法。例如：

$(document).ready(function(){ready1();}); 
$(document).ready(function(){ready2();});
var ready1 = function () { 
    var maxHeight = -1;
      $('.portfolio-set-height').height(''); 
    $('.portfolio-set-height').each(function() { maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); }); 
    $('.portfolio-set-height').each(function() { $(this).height(maxHeight); }); 
} 
var ready2 = function () {
    $(".work-slider").css("min-height", function(){ return $(".portfolio-set-height").height() });
}
$(window).resize(function(){ ready1(); ready2(); });

【讨论】：

谢谢，但我不确定如何按照您描述的方式重写我的代码？（我对 jQuery 很陌生）
cmets 中的代码不是很好的选择。希望这可以帮助。 $(文档).ready(ready1); $(文档).ready(ready2); var ready1 = function () { var maxHeight = -1; $('.portfolio-set-height').each(function() { maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); }); $('.portfolio-set-height').each(function() { $(this).height(maxHeight); }); } var ready2 = function () { $(".work-slider").css("min-height", function(){ return $(".portfolio-set-height").height() }); } $(window).resize(function(){ ready1(); ready2(); }
再次感谢您的帮助，但您的代码出现错误，无法正常工作。为了更好地显示代码，您可以编辑您的第一个答案
谢谢，我可以看到在我调整大小时触发了警报，但是由于某种原因（当我运行脚本时，没有警报）高度和最小高度在调整大小时没有改变？
我调试并发现了你的问题。让我试着解释一下：1）在 $(document).ready 上，元素没有高度。 $(this).height() 只给出计算的高度。现在使用 $(this).height(maxHeight)，设置高度。 2) 在调整大小时，元素的高度不会改变，因为它们是由 $(this).height 固定的！浏览器中只能出现滚动条。这意味着第一个 each 将返回当前高度而不是新高度。总结：
在每次浏览器调整大小时都将永远是 100px。

【解决方案2】：

检测窗口大小调整的唯一函数是 .resize。您需要在 JQuery 中使用 .resize：http://api.jquery.com/resize/

$(window).resize(function() {
    // the window has been resized, make changes
});

如果这不是工作，那么你的逻辑有问题。发布一个 jsfindle 复制粘贴。

这是一个 jsFidel：http://jsfiddle.net/uVkrS/7/

【讨论】：

你读过这个问题吗？关于“我已经尝试过$(window).resize(function() 没有运气”的观点？