Tengo un problema para entender cómo podría usar la palabra clave 'esto' para referirme a un elemento DOM en el que se ha hecho clic, pero también usar eso dentro de una clase donde 'esto' generalmente se refiere a la instancia de esa clase.
Aquí hay un fragmento del código relevante:
class Passwords { constructor() { $('.password-column button.steel-button').on('click', this.selectButton); } selectButton() { $(this).toggleClass('selected'); this.columnController(); } columnController(){ // A function that does something else } }El problema que tengo es que no reconoce columnController() como una función. Me imagino que esto se debe al alcance y cómo funciona con 'esto', pero no estoy seguro de cómo proceder.
En el código anterior, selectButton() se aplica con éxito a todos los botones especificados, pero el error aparece en this.columnController(). El error exacto de la consola es:
TypeError no detectado: this.columnController no es una función
Gracias de antemano.
No puede usar this para representar ambos objetos, así que elija uno y obtenga el otro a través de algún otro mecanismo.
Por ejemplo: use una función de flecha para vincular this valor a la clase, luego obtenga el elemento del objeto de event .
class Passwords { constructor() { $('.password-column button.steel-button').on('click', this.selectButton); } selectButton = (event) => { $(event.currentTarget).toggleClass('selected'); this.columnController(); } columnController() { console.log("this runs"); } } new Passwords(); .selected { background: blue } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="password-column"> <button class="steel-button">click</button> </div>