Tengo una clase JS que tiene la función de dar un borde a un elemento cuando hago clic en otro elemento. Eso significa que cuando hago clic en el elemento de clase .trigger , le dará un borde al elemento de clase .content . Pero esta función solo debería ocurrir en función de una condición booleana.
Si Boolean es Sí, debería darle un borde; de lo contrario, no debería funcionar. Mi código funciona cuando configuro el método dentro de los paréntesis del constructor con this palabra clave y también puedo declarar una variable allí. Pero necesito el método fuera del constructor basado en mi otro código.
Entonces, ¿cómo puedo declarar una variable fuera del constructor y dentro de la clase? Necesito esto usando el enfoque Class basado en mi proyecto.
Mi código es el siguiente.
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>Primero, ¿por qué algunos onClick cuyo único caso de uso es la condición if? ¿No deberías ser como, dentro de makeOutline() :
makeOutline() { if (this.condition) { this.trigger.addEventListener("click", (e) => { e.target.nextElementSibling.style.border = "2px solid red"; }) } }?
En segundo lugar, ¿por qué intenta establecer variables locales fuera del constructor/métodos?
ACTUALIZACIÓN : Veo que está preguntando acerca de declarar un campo de clase fuera de su constructor. En ese caso, lo declaras en la parte superior de la clase. Lo siguiente debería funcionar:
class ParentSelector { condition = false; constructor(trigger, content, condition) { this.trigger = document.querySelector(trigger); this.content = document.querySelector(content); this.condition = condition; } // ... }¡Siéntete libre de hacerme cualquier pregunta que tengas sobre esto!
por fin pude encontrar la solución yo mismo después de un pensamiento profundo. La siguiente es la solución. A continuación se muestra el código.
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>