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)));

查看更新的小提琴here

停止将更改传播到同一对象

1 个答案: