在 Jquery 每个循环中使用 TypeScript 变量

Question

我有一个名为 tableIndexNumber 的变量，我需要在不同的方法中使用它。因此，当我尝试访问该变量时，我使用“this.tableIndexNumber”并且可以访问它。但是我不能在 Jquery 每个循环中以这种方式使用它，因为 htmlElemets 在每个循环中也定义为“this”。那我应该走哪条路呢？

export class TablesComponent implements OnInit {

tableIndexNumber = 1;

constructor() { }

change(col: number) {

$('#' + col).each(function () {

  if ($(this).attr('class') === 'box') {

    $(this).addClass('boxSelected');
    this.tableIndexNumber ++; 

  } else {
    $(this).removeClass('boxSelected').addClass('box');
  }
});

}

Answer 1

处理此问题的老派方法是将this 保存到each 之前称为“上下文”或“那个”或类似名称的变量中，然后使用该变量。 幸运的是，今天我们有 arrow functions，它们非常适合这种情况，因为它们没有自己的 this 上下文。

更新：我忽略了查找each 的语法。看起来您需要内部的this，所以箭头函数不起作用。相反，您可以通过将外部 this 保存到变量来解决您的问题：

export class TablesComponent implements OnInit {
    tableIndexNumber = 1;

    constructor() { }

    change(col: number) {
        const component = this;
        $('#' + col).each(function() {
          if ($(this).attr('class') === 'box') {
            $(this).addClass('boxSelected');
            component.tableIndexNumber++; 
          } else {
            $(this).removeClass('boxSelected').addClass('box');
          }
        });
    }
}