javascript - 如何重置功能？

Question

var count = 0;
var change = function(btn) {
  count++
  var color = "";
  switch(count) {
    case 1: 
      color = "#ef2715";
      break;
    case 2: 
      color = "#ef8c14";
      break;
    case 3:
      color = "#efd514";
      break;
    case 4:
      color = "#3fef14";
      break;
    case 5:
      color = "#145def";
      break;
    case 6:
      color = "#093b9e";
      break;
    case 7: 
      color = "#6414ef";
      break;
    default:
      color = "#6414ef";
      break;
  }
  btn.style.background = color;
}

button { border: 1px solid black; width: 50px; height: 50px; float: left; }

<button id="one" onclick="change(this)"></button>
<button id="one" onclick="change(this)"></button>
<button id="one" onclick="change(this)"></button>
<button id="one" onclick="change(this)"></button>
<button id="one" onclick="change(this)"></button>
<button id="one" onclick="change(this)"></button>
<button id="one" onclick="change(this)"></button>
<button id="one" onclick="change(this)"></button>

我想制作某种 Canvas 。如果单击按钮一次，颜色将为红色，如果单击两次，颜色将为橙色。当您单击另一个按钮时，必须重置此功能(“计数”应重置)。

但是，即使我单击另一个按钮，功能计数也会保持不变。 我怎么解决这个问题？

(如果我想要我的 Canvas 为2500px，我是否有必要制作50个按钮？或者有没有更简单/更短的方法来制作按钮？)

谢谢

Answer 1

尝试这种方法。它为您的所有按钮提供单独的计数器。

var change = function(btn) {
  if(!btn.hasOwnProperty('myCount')) {
    btn.myCount = 0;
  }
  btn.myCount++;
  var color = "";
  switch(btn.myCount) {
    case 1: 
      color = "#ef2715";
      break;
    // ...
  }
  btn.style.background = color;
}

每个计数器都存储在按钮对象上。

UPD较短的版本是

var change = function(btn) {
  btn.myCount = !btn.myCount ? 1 : btn.myCount + 1;
  var color = "";
  // ...
}