需要帮助了解类中创建的 DOM 元素和对象之间的关系

Question

class Button {

    constructor(name) {

        this.target = 'bullseye';

        this.name = name;

        this.element = this.create();

    }

    create() {

        var button_html = '<div>'+this.name+'</div>';

        var button_element = $(button_html);

        button_element[0].addEventListener('click', function(e) {

            Button.yell('??????');

            //Should be buttonA, or buttonB depending on which one was clicked. I have tried, (this) & (e), but to no success.

        }); 

        $('body').append(button_element);

        return button_element;

    }

    static yell(element){

        alert('You have hit the '+element.target);

    }

}

let buttonA = new Button('Button A');

let buttonB = new Button('Button B');

https://jsfiddle.net/x4dsgp5b/1/

我觉得我在这里误解了一些非常基本的东西。将[可单击]按钮放置在类的主体上并与按钮A或按钮B（取决于单击哪个）进行交互的正确语法/逻辑是什么？

Answer 1

可以仅使用名称，并使用属性来获取当前按钮。然后在单击处理程序中，您通过名称知道单击了哪个按钮。this像这样：class Button {&nbsp; &nbsp; constructor(name) {&nbsp; &nbsp; &nbsp; &nbsp; this.name = name;&nbsp; &nbsp; &nbsp; &nbsp; this.element = this.create();&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; create() {&nbsp; &nbsp; &nbsp; &nbsp; const element = document.createElement("button");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; element.innerHTML = `<div>${this.name}</div>`;&nbsp; &nbsp; &nbsp; &nbsp; element.addEventListener('click', this.yell.bind(this))&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; document.body.appendChild(element);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return element;&nbsp; &nbsp; }&nbsp; &nbsp; yell() {&nbsp; &nbsp; &nbsp; &nbsp; alert('You have hit the '+this.name);&nbsp; &nbsp; }}const buttonA = new Button('Button A');const buttonB = new Button('Button B');一些注意事项：我使用了新的ES6同轴（不需要时没有var或让）我没有使用 jquery（这个例子很容易在纯 JavaScript 中完成）我用作点击的直接处理程序，为了有好的我必须绑定它this.yellthis我需要 yell 函数中的属性才能知道名称，这就是我删除 static 关键字的原因。this

Answer 2

我相信有一个更优雅的解决方案，但这个有效。class Button {&nbsp; &nbsp; constructor(name) {&nbsp; &nbsp; &nbsp; &nbsp; this.target = 'bullseye';&nbsp; &nbsp; &nbsp; &nbsp; this.name = name;&nbsp; &nbsp; &nbsp; &nbsp; this.element = this.create();&nbsp; &nbsp; }&nbsp; &nbsp; create() {&nbsp; &nbsp; &nbsp; &nbsp; var buttone = document.createElement("div");&nbsp; &nbsp; &nbsp; &nbsp; buttone.innerHTML = this.name;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; document.body.appendChild(buttone);&nbsp; &nbsp; &nbsp; &nbsp; let _name = this.name;&nbsp; &nbsp; &nbsp; &nbsp; buttone.addEventListener('click', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Button.yell(_name);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return buttone;&nbsp; &nbsp; }&nbsp; &nbsp; static yell(element){&nbsp; &nbsp; &nbsp; &nbsp; alert('You have hit the '+element);&nbsp; &nbsp; }}let buttonA = new Button('Button A');let buttonB = new Button('Button B');

Answer 3

这应该有效！您已经有一个接受该元素的函数 （按钮.yell）。button_element[0].addEventListener('click',&nbsp;Button.yell);

Answer 4

我对此的理解是，您希望警报说出“按钮A”或“按钮B”一词。button_element[0].addEventListener(&nbsp; &nbsp; &nbsp;'click',&nbsp;&nbsp; &nbsp; &nbsp;(e) => Button.yell(this.name));请注意，我使用的是箭头函数语法 （）而不是函数语法。这样做的原因是，如果使用函数语法，则处理程序函数中的值将不同。=>this