我如何在 Vanilla JavaScript class 中使用变量来制作基于 Z84E2C64F55AB78BA3ZEA5C2 的 function

Question

我有一个 JS Class，当我单击另一个元素时，它正在制作一个 function 为元素提供边框。 这意味着当我单击.trigger class 元素时，它将为.content class 元素提供边框。 但是这个 function 只应该基于 Boolean 条件发生。

如果 Boolean 是 Yes 它应该给边界，否则它不应该工作。 当我使用this关键字在构造函数括号内设置方法时，我的代码可以工作，并且我也可以在那里声明变量。 但是我需要基于我的其他代码的构造函数之外的方法。

那么如何在构造函数之外和 class 内部声明变量。 我需要根据我的项目使用 Class 方法。

我的代码如下。

 class ParentSelector { constructor(trigger, content, condition) { this.trigger = document.querySelector(trigger); this.content = document.querySelector(content); } let outline = condition; makeOutline() { this.trigger.addEventListener("click", (e) => { if (condition) { e.target.nextElementSibling.style.border = "2px solid red"; } }) } } let a = new ParentSelector(".trigger", ".content", true); a.makeOutline();

 <div class="one"> <div class="trigger">Trigger</div> <div class="content">Content</div> </div>

Answer 1

首先，为什么有些onClick的唯一用例是 if 条件？ 你不应该像，在makeOutline()里面：

makeOutline() {
    if (this.condition) {
      this.trigger.addEventListener("click", (e) => {
        e.target.nextElementSibling.style.border = "2px solid red";
     })
    }
  }

?

其次，你为什么要在构造函数/方法之外设置局部变量？

更新：我看到你在问关于在其构造函数之外声明一个 class 字段。 在这种情况下，您在 class 的顶部声明它。 以下应该有效：

class ParentSelector {
  condition = false;

  constructor(trigger, content, condition) {
    this.trigger = document.querySelector(trigger);
    this.content = document.querySelector(content);
    this.condition = condition;
  }

  // ...
}

如果您对此有任何疑问，请随时问我！

Answer 2

经过深思熟虑，我终于自己找到了解决方案。 以下是解决方案。 以下是代码。

 class ParentSelector { constructor(trigger, content, condition) { this.trigger = document.querySelector(trigger); this.content = document.querySelector(content); this.outline = condition; } makeOutline(){ this.trigger.addEventListener("click", (e) => { if (this.outline) { e.target.nextElementSibling.style.border = "2px solid red"; } }) } } let a = new ParentSelector(".trigger",".content", true); a.makeOutline();

 <div class="one"> <div class="trigger">Trigger</div> <div class="content">Content</div> </div>