javascript - HTML 在元素中切换颜色，每个元素都使用相同的颜色

Question

考虑这段代码:

var counter = 0;
function changeColor(elem) {

  var colors = ["Red", "Green", "Blue", "Orange", "Yellow", "Cyan"];
  elem.style.color = colors[counter];
  counter++;
  if (counter === colors.length) {
    counter = 0;
  }
}

我想制作将通过颜色数组的元素，每次点击都会改变。该脚本有效，但是当我单击一个元素 2 次，然后跳转到另一个元素并单击那里时，它将恢复第三种颜色，而不是返回到第一种。我知道这是因为全局计数器变量，但是将它放入函数中会导致它重置，从而使颜色仅变为“红色”。

我不确定如何解决这个问题，我还在为 HTML 中的元素使用 this 上下文:

 <div>
      <p onclick="changeColor(this)">Hello</p>
      <p onclick="changeColor(this)">Bye</p>
      <p onclick="changeColor(this)">I love you!</p>
    </div>

提前致谢，干杯!

Answer 1

每个elem是一个 DOM 节点 ( <p> -tag) 对象，因为它是一个对象，所以你可以设置任何你想要的属性，比如 counter :

function changeColor(elem) {
  var colors = ["Red", "Green", "Blue", "Orange", "Yellow", "Cyan"];
  var lastIndex = colors.length - 1;

  if (elem.counter === undefined || elem.counter == lastIndex) {
    elem.counter = 0;
  }
  else {
    elem.counter++;
  }
  
  elem.style.color = colors[elem.counter];
};

<div>
  <p onclick="changeColor(this)">Hello</p>
  <p onclick="changeColor(this)">Bye</p>
  <p onclick="changeColor(this)">I love you!</p>
</div>