Javascript 如何使用jquery在3种背景色之间切换

我试图创造一个4连胜的游戏。这意味着每当我点击一个“圆圈”，它就会在默认颜色（“灰色”）、播放器1颜色（“蓝色”）和播放器2颜色（“红色”）之间改变颜色。 我正在努力使用jquery在3种颜色之间切换。我发现的帖子很旧，他们建议的代码对我不起作用

每个“圆圈”都是一个HTML表格元素（即重复多次的table>tr>td）

我的js代码如下所示：

$('tr > td').click(function () { 
if ($(this).css('background-color', 'grey' ) === true) {
    $(this).css('background-color', 'blue' )
} else if ($(this).css('background-color', 'blue') === true) {
    $(this).css('background-color', 'red' )
}   else {
    $(this).css('background-color', 'grey' )
}
});    

我的css样式表是：

td {
height: 90px;
width: 90px;
padding: 5px;
text-align: center; 
border-radius: 50%;
display: inline-block;
color:#fff;
font-size:1.1em;
font-weight:600;
background-color: grey;
border: 2px solid black;
}

当我点击每个按钮时，什么都没有发生。再看一看，第一个假设（即如果td bckgd color=grey）似乎总是错误的，这意味着if函数永远不会启动。 但是我不明白为什么会这样。我是否写错了“如果”条件？（我尝试了==而不是==，不起作用）

仅供参考，我也尝试过使用.toggleClass（），但这似乎不适用于3种颜色之间的切换

---

谢谢

要实现这一点，您可以将要循环的颜色放置在阵列中。然后，您可以使用索引值在单击每个圆时连续迭代该数组，该索引值可以存储在

td

上的

data

属性中。也可以使用模运算符在到达数组末尾时从开始处继续。试试这个：

var colors=[‘灰色’、‘蓝色’、‘红色’]；
$（'tr>td'）。单击（函数（）{
var$cell=$（此）；
var index=$cell.data（'index'）|| 0；
$cell.css（'background-color'，colors[++index%colors.length]）；
$cell.data（'index'，index）；
});
td{
高度：90px；
宽度：90px；
填充物：5px；
文本对齐：居中；
边界半径：50%；
显示：内联块；
颜色：#fff；
字体大小：600 1.1米；
背景颜色：灰色；
边框：2件纯黑；
}

试试这个

<table>
  <tr>
    <td></td>
  </tr>
</table>

td {
height: 90px;
width: 90px;
padding: 5px;
text-align: center; 
border-radius: 50%;
display: inline-block;
color:#fff;
font-size:1.1em;
font-weight:600;
background-color: grey;
border: 2px solid black;
}

<script>
    var color = 0;
$('tr > td').click(function () { 
 $('td').each(function() {
  if(color == 0){
   $(this).css('background', 'gray');
   color = 1
  }
  else if(color == 1){
  $(this).css('background', 'red');
  color = 2
  }
  else{
  $(this).css('background', 'blue');
  color = 0
  }

  });
}); 
</script>


运输署{
高度：90px；
宽度：90px；
填充物：5px；
文本对齐：居中；
边界半径：50%；
显示：内联块；
颜色：#fff；
字体大小：1.1米；
字号：600；
背景颜色：灰色；
边框：2件纯黑；
}
var-color=0；
$（'tr>td'）。单击（函数（）{
$（'td'）。每个（函数（）{
如果（颜色==0）{
$（this.css（'background'，'gray'）；
颜色=1
}
else if（颜色==1）{
$（this.css（'background'，'red'）；
颜色=2
}
否则{
$（this.css（'background'，'blue'）；
颜色=0
}
});
});