如何在 javascript 类中使用 JQuery $(this)

Question

当我写jQuery代码时，我使用$(this)来改变元素：

$('.classname').click(function(){
  $(this).toggleClass('collapsed');
  // ..
});

现在我有 javascript 类，看起来像这样：

class CabinetFormSize {
  constructor() {
    this.cabinetBTN = $(".cabinetBTN");
    this.events();
  }

  events() {
    this.cabinetBTN.click(this.toggleMenu.bind(this));
  }

  toggleMenu() {
     console.log($(this)); 
     this.cabinetBTN.toggleClass('d-none');
  }
}

如果我在toggleMenu() 中写这个，我有类实例，但我需要元素。

console.log($(this))

如何在toggleMenu() 函数中使用$(this) 来获取元素？ 如果我删除bind(this)，console.log($(this)) 工作，但在这个字符串this.cabinetBTN.toggleClass('d-none') 我有Uncaught TypeError: Cannot read property 'toggleClass' of undefined。

Answer 1

不要将任何this 绑定到您的回调。 jQuery 将使用正确的this 调用您的回调。喜欢

this.cabinetBTN.click(this.toggleMenu);

当您将this 绑定到一个函数时，您基本上是在创建一个具有“硬编码”this 值的新函数。

我的解决方案与工作的 sn-p：

class CabinetFormSize {
  constructor() {
    this.cabinetBTN = $(".cabinetBTN");
    this.events();
  }

  events() {
    this.cabinetBTN.click(this.toggleMenu);
  }

  toggleMenu() {
    console.log($(this).text())
  }
}

new CabinetFormSize();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cabinetBTN">Click me</div>