Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我想制作某种绘画画布。如果单击一次按钮，颜色将为红色，如果单击两次，颜色将为橙色。当您点击另一个按钮时，必须重置此功能（＆＃39;计数＆＃39;应重置）。

但是，即使单击其他按钮，功能计数也会保留。我怎么解决这个问题？

（如果我想要我的画布为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 = "";
  // ...
}

Answer 2

这样做的一种方法是在每个按钮上设置自定义属性 - 例如"data-count"跟踪该按钮的颜色索引。

因此，当您单击该按钮时，您可以增加此计数 - 并将其保存回data-count属性。

请参阅下面的代码段，了解如何实施此功能：

＆＃13;

var change = function(btn) {
  let count = btn.attributes["data-count"] ?
    parseInt(btn.attributes["data-count"].value) :
    0;

  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;
  btn.setAttribute("data-count", count);
}

＆＃13;

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

＆＃13;

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

＆＃13;

此外，您可以根据条件重置计数器，例如count == 7 - 如果需要。

Answer 3

DOM中的元素不希望具有相同的标识，并且下面的代码适用于Id，当连续点击发生在同一个按钮并重置为其他

时，该ID保持逻辑

＆＃13;

   var count =0;
var tempButtonId="";
    var change = function(btn) {
if(btn.id!=tempButtonId)
{ 
tempButtonId=btn.id;
 count=1;
}else{
      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;
  
     }

＆＃13;

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

＆＃13;

<button id="one" onclick="change(this)"></button>
<button id="two" onclick="change(this)"></button>
<button id="three" onclick="change(this)"></button>
<button id="four" onclick="change(this)"></button>
<button id="five" onclick="change(this)"></button>
<button id="six" onclick="change(this)"></button>
<button id="seven" onclick="change(this)"></button>
<button id="eight" onclick="change(this)"></button>

＆＃13;

如何重置功能？

3 个答案: