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

Question

I have a JS Class which is making a function of giving a border to an element when i click to another element. That means when I click on .trigger class element, it will give a border to .content class element. But this function only should be happen based on a Boolean condition.

If Boolean is Yes it should be give border, otherwise it should not work. My code works when I set the method inside the constructor parentheses with this keyword and I can also declare variable there. But I need the method outside the constructor based on my other code.

So how can I possible declare variable outside the constructor and inside the class. I need this using Class approach based on my project.

My code is as follows.

 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

First, why some onClick whose only use case is the if-condition? Shouldn't you be like, inside makeOutline() :

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

?

Second, why are you trying to set local variables outside constructor/methods?

UPDATE : I see you're asking about declaring a class field outside of its constructor. In that case, you declare it at the top of the class. The following should work:

class ParentSelector {
  condition = false;

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

  // ...
}

Feel free to ask me any questions you have about this!

Answer 2

at last i able to find the solution myself after a deep thinking. Following is the solution. Following is the code.

 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>