停止将更改传播到同一对象的多个实例

Question

我是JS中OOP的新手，所以我不知道为什么会这样。 当我更改颜色后，在我的网格上单击以添加其他有色单元格，它将所有其他单元格的颜色更改为我当前的颜色。 如何在每个单元格都可以保持其初始颜色的位置上制作它？

这是单元格对象，以及如何定义颜色。

    function Cell(x, y) {
        this.x = x;
        this.y = y;
        this.live = false;
        this.grid = grid;
        this.color = "#FF0000"; //default
        document.getElementById("color").addEventListener("input", function(){
            this.color = document.getElementById("color").value;
        }.bind(this)); // bind event callback to 'this'
    };

JSFiddle

Answer 1

您为所有单元格添加了一个事件侦听器，因此当颜色输入更改时，将为所有单元格对象触发回调。

相反，您可以执行以下操作：

从构造函数中删除addEventListener

function Cell(x, y) {
  // var cell = this; // <==== no need to do this
  this.x = x;
  this.y = y;
  this.live = false;
  this.grid = grid;
  this.color = "#FF0000"; //default
};

然后添加一种根据当前输入值设置单元格颜色的方法

Cell.prototype.updateColor = function (){
  this.color = document.getElementById("color").value;
};

并在click事件处理程序中调用此方法

td.addEventListener('click', (function (cell) {
  return function (e) {
    cell.toggle();
    cell.updateColor();
    viewModel.update();
  };
}(cell)));

在这里查看更新的小提琴