javascript - 在同一个对象上使用 mousePressed 两次？

Question

我有一个程序，我希望一个圆圈在按下时改变颜色，然后如果再次按下它会变回原始颜色。

我已经设法在第一次单击时更改它，但是当我再次单击它时不知道如何将其更改回来。

有人对我如何在第二次单击时更改颜色或更改为其他颜色有任何提示吗？

当前代码：

// My function for changing the color when clicked.
function mousePressed () {
  for (var i = 0; i < 10; i++) {
    bubbles[i].interact();
  }
}

// function inside the class for the circle 
// to determine distance and what color.
interact () {
  let d = dist (this.x, this.y, mouseX, mouseY);
  if (d < this.r) {
    this.col = 0;
  }
}

Answer 1

如果您可以在 codepen 或类似的沙箱中重现您的问题，那么有人帮助您解决它会更容易。

2件事浮现在脑海：

您可以使用element.classlist.toggle()打开/关闭一个类并设置该类的样式。

或者你可以像这样扩展你的代码：

if (d < this.r) {
  if (this.col === 0) {
    this.col = 1;  // I'm guessing this is the correct value
  } else {
    this.col = 0;
  }
}