jquery - 使用 jquery 动态调整大小

Question

我已经看到对此的另一个参考，但我无法理解响应。我正在尝试在调整窗口大小时动态更改页面元素（#maincontent）的高度。

这是我的代码：

$(function() {
   if($(window).resize()){
      var h1 = $(window).height();
      var h2 = $('#maincontent').height();
      if (h2<h1){
          $('#maincontent').css('height',h1);
      }
   }
});

没有页面刷新它就行不通，我不明白为什么不这样做。我哪里出错了？

Answer 1

您没有正确捕获窗口调整大小事件：

   $(window).resize(function () {

      var h1 = $(window).height();
      var h2 = $('#maincontent').height();
      if (h2<h1){
          $('#maincontent').css('height',h1);
      }

   });

Answer 2

调整大小功能不能这样工作。它接受一个函数作为参数：

$(function(){
    $(window).resize(function() {
       // do things when the window is resized
    });
});

大多数 jquery 函数都采用这样的回调，在发送事件（此处为“调整大小”）时调用该回调。

Answer 3

这是因为 window.resize() 将函数作为其参数

前任。

    $(function () {
        $(window).resize(function () {
            // your code here
        });
    });

Answer 4

$(function() {
    $(window).resize(function(e){

        var h1 = $(window).height();
        var h2 = $('#maincontent').height();
        if (h2<h1){
        $('#maincontent').css('height',h1);
        }

    })
 });

你不应该检查是否而是通过函数来​​调整大小事件

Answer 5

这是因为在页面加载时不会resize触发。

var h2 = $('#maincontent').height();

function setSize(){         // wrap you necessary code inside a function
   var h1 = $(window).height();       
   if (h2<h1){
      $('#maincontent').css({height: h1 });
   }
}
setSize();                 // call at page load

$(window).resize(function(){
  setSize();               // and on window resize.
});