调用函数时如何使每个对象的计数器变量从0开始？

Question

我正在制作一个简单的网站，容器中有一堆 div。当您单击 div 时，它会更改颜色。当 div 被按下 8 次时，它会回到起始颜色“LightSlateGray”。问题是如果有人在点击第一个 div 后点击另一个 div，我用来计算点击次数的变量不是从 0 开始的。 例如： 单击第一个 div，它的颜色变为红色。当单击另一个 div 时，它的背景颜色变为绿色，但我希望它变为红色，并且当用户不断按下第二个 div 时，它应该变为绿色、蓝色然后橙色等。

var order = 0;
function changeColour(item)
{
    
    order++;
    if(order == 1)
    {
        item.style.backgroundColor = 'red';
    }
    else if(order == 2)
    {
        item.style.backgroundColor = 'Green';
    }
    else if(order== 3)
    {
        item.style.backgroundColor = 'Blue';
    }
    else if(order == 4)
    {
        item.style.backgroundColor = 'Orange';
    }
    else if(order == 5)
    {
        item.style.backgroundColor = 'Yellow';
    }
    else if(order == 6)
    {
        item.style.backgroundColor = 'Purple';
    }
    else if(order == 7)
    {
        item.style.backgroundColor = 'Black';
    }
    if(order == 8)
    {
        item.style.backgroundColor = 'LightSlateGray'
        order = 0
    }
        
}

我试图将 var order = 0 放在函数本身中，但这只是愚蠢的，因为它使代码的其他部分无用

有没有办法在不创建大量变量的情况下实现这一目标？

Answer 1

我觉得试试这个会很好。

let order = 0;

const orderColor = {
  1: 'red',
  2: 'Green',
  3: 'Blue',
  4: 'Orange',
  5: 'Yellow',
  6:'Purple',
  7:'Black',
  8:'LightSlateGray',
}

function changeColour(item) {
  order++;

  item.style.backgroundColor = orderColor[order]

  if (order === 8) {
    order = 0
  }
}

Answer 2

您可以使用循环创建这些变量：

document.querySelectorAll('div div').forEach(div => {
  // New 'order' forEach element.
  let order = 0;
  
  div.addEventListener('click', function() {
    this.style.backgroundColor = colors[order];
    order = (order + 1) % colors.length;
  });
});

试试看：

const colors = [
  'Red', 'Green', 'Blue', 'Orange',
  'Yellow', 'Purple', 'Black', 'LightSlateGray'
];

document.querySelectorAll('div div').forEach(div => {
  let order = 0;
  
  div.addEventListener('click', function() {
    this.style.backgroundColor = colors[order];
    order = (order + 1) % colors.length;
  });
});

#container {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: 2em;
}

div div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  aspect-ratio: 1 / 1;
  padding: 3em;
  user-select: none;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

...或者使用

Array#indexOf()

让 JS 为你做这件事（注意我用小写字母写了颜色名称）：

const colors = [
  'red', 'green', 'blue', 'orange',
  'yellow', 'purple', 'black', 'lightslategray'
];

document.querySelectorAll('div div').forEach(div => {
  div.addEventListener('click', function() {
    let order = colors.indexOf(this.style.backgroundColor);
    order = (order + 1) % colors.length;
    this.style.backgroundColor = colors[order];
  });
});

试试看：

const colors = [
  'red', 'green', 'blue', 'orange',
  'yellow', 'purple', 'black', 'lightslategray'
];

document.querySelectorAll('div div').forEach(div => {
  div.addEventListener('click', function() {
    let order = colors.indexOf(this.style.backgroundColor);
    order = (order + 1) % colors.length;
    this.style.backgroundColor = colors[order];
  });
});

#container {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: 2em;
}

div div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  aspect-ratio: 1 / 1;
  padding: 3em;
  user-select: none;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>