Question

我写了一些代码如下。在这里，我正在为该类创建新实例 todos并且每次都将单独的文本传递给构造函数。

在setText内我将点击方法绑定到元素test，以便在点击它时返回与之关联的文本。

问题在于，此方法创建的三个组件显示了单独的文本，但单击任何元素时，它将文本显示为'this is a todo component3'，这是我传递给构造函数的最后一个文本。我希望每个组件都是独立的。请帮忙。

class todos{
  constructor(text){
    this.istodo = false;
    this.text = text;
  }
  _changestatus(){
    this.istodo = !this.istodo;
  }
  setText(){
    this.getDiv  = document.getElementById('test');
    this.getDiv.innerHTML = this.getDiv.innerHTML+'\n'+this.text;
    this.getDiv.onclick = (event)=> {alert(this.text)}; //this is always coming as "this is a todo component3"
  }
}


let todo = new todos('this is a todo component');
todo.setText();
let todo1 = new todos('this is a todo component1');
todo1.setText();
let todo2 = new todos('this is a todo component2');
todo2.setText();
let todo3 = new todos('this is a todo component3');
todo3.setText();

Answer 1

问题是你的所有文本只有一个容器，你添加的每个下一个待办事项都会覆盖前一个创建的onclick处理程序。所以这就是问题所在。

要解决此问题，您需要确保每个待办事项都为文本创建自己的容器。以下是一种可行的方法。请注意，我从document.getElementById('test')类中删除了todos。

＆＃13;

    class todos {
      constructor(text) {
        this.istodo = false;
        this.text = text;
      }
      _changestatus() {
        this.istodo = !this.istodo;
      }
      setText() {
        this._node = document.createElement('div');
        this._node.appendChild(new Text(this.text));
        this._node.onclick = (event) => {
          alert(this.text)
        };
      }
      getNode() {
        return this._node;
      }
    }

    let container = document.getElementById('test');

    ['this is a todo component', 'this is a todo component #2', 'this is a todo component #3'].forEach(text => {
      let todo = new todos(text);
      todo.setText();
      container.appendChild(todo.getNode());
    });

＆＃13;

<div id="test"></div>

＆＃13;

在ES6中创建的每个新实例中传递单独的范围

1 个答案: