jquery window 调整大小时出现调整错误

Question

我正在尝试让 div 在 window 调整大小时调整大小。使用以下代码我得到 "this.fullScreen is not a function" 如果我删除 window 调整大小它工作正常但显然不会使用 window 调整大小。我是不是想错了？

var PE = {};

PE.functions = {
  fullScreen: function fullScreen() {
    var fullScreen = $('.full-screen'),
      navbarHeight = $('.navbar').height(),
      windowHeight = $(window).height(),
      windowWidth = $(window).width();

    fullScreen.css({
      width: windowWidth,
      height: windowHeight - navbarHeight
    });
  },

  fullScreenResize: function screenResize() {
    $(window).resize(function(){
        this.fullScreen();
    });
  }
};

$(document).ready(function() {
  PE.functions.fullScreenResize()
});

Answer 1

在fullScreenResize中，对this.fullScreen()、this的调用不一定是PE.functions对象，因为传给resize的回调函数有不同的this。补救，bind回调函数到当前this:

fullScreenResize: function screenResize() {
  $(window).resize(function() {
      this.fullScreen();
  }.bind(this));
}

或将 this.fullScreen() 替换为完整的对象路径 PE.functions.fullScreen()。

jquery window 调整大小时出现调整错误

jquery window resize error when resizing

javascript

jquery

resize