使用 jQuery 时维护此范围

Question

我有一个设置一些默认属性的对象

var Gallery = function(container, opts) {
 this.$innerWrap = null;
 this.innerWrapWidth = 0;
 this.$slides = $(el).find('img');
};

现在，稍后我用另一个函数扩展原型来计算this.innerWrapWidth 的宽度，这是通过计算$innerWrap 内的所有图像并将它们加在一起来完成的。

我有一个问题，但与范围有关，这是我的功能：

Gallery.prototype.calcWrapWidth = function() {
 var that = this;

 $(window).on('load', function() {
  $.each(that.$slides, function() {
   var slide = $(this);
   that.innerWrapWidth += slide.width();
  });
  that.$innerWrap.width(that.innerWrapWidth);
 });
 console.log(this.innerWrapWidth)
};

理想情况下，我会遍历数组中的所有图像，获取宽度并将其设置在属性 this.innerWrapWidth 上，然后将值添加到 this.$innerWrap。

我尝试设置var that = this;

但是当我运行 console.log 时，我得到 0 作为值返回。我找不到在this.innerWrapWidth上设置最终宽度的最佳方法

更新：

我已经缩小范围了！如果我 console.log out window.load 函数内的 that 变量，我会得到我期望的值，但由于某种原因，运行 that.$innerWrap.width(that.innerWrapWidth); 不会设置元素的宽度。我可以确认内部包裹绝对是一个 jQuery 对象，innerWidth 绝对是一个整数。

Answer 1

我看来你应该使用下面的代码序列：

$(window).on('load', function() { 
  var myGal = new Gallery(..);
  myGal.calcWrapWidth();
});

并从calcWrapWidth 方法中删除$(window).on('load', function() { 代码行。

这可确保在执行计算时所有元素都显示在页面上。