如何用jQuery实现三种背景色循环切换？四子棋开发故障求助

我明白你遇到的问题了——你的jQuery代码逻辑有两个关键错误，导致点击完全没反应，而且toggleClass确实只适合两种状态的切换，三种状态得换个思路。咱们一步步来解决：

你的代码问题分析 #

• 错误使用css()方法：你写的$(this).css('background-color', 'grey')是设置背景色的操作，它返回的是jQuery对象，不是布尔值，所以你的=== true判断永远不成立。要获取当前背景色应该用$(this).css('background-color')，但这里还有个坑：浏览器会把颜色名转换成RGB格式返回（比如grey会变成rgb(128, 128, 128)），直接判断颜色名也会失败。
• 逻辑顺序混乱：即使获取到正确的颜色值，你的条件判断顺序也会导致状态切换逻辑出错，无法形成循环。

推荐解决方案：用数据属性记录状态 #

最可靠的方式是用data-*属性来记录每个单元格的当前状态，完全脱离CSS颜色值的依赖，逻辑更清晰，也符合前端最佳实践：

完整代码示例 #

HTML（假设你的表格结构）

<table>
  <tr>
    <td data-state="0"></td>
    <td data-state="0"></td>
    <td data-state="0"></td>
    <!-- 按需添加更多单元格 -->
  </tr>
  <!-- 按需添加更多行 -->
</table>

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;
  border: 2px solid black;
}
/* 用类控制不同状态的颜色 */
.cell-grey { background-color: grey; }
.cell-blue { background-color: blue; }
.cell-red { background-color: red; }

jQuery代码

// 初始化所有单元格为灰色状态
$('tr > td').addClass('cell-grey');

$('tr > td').click(function () {
  const $cell = $(this);
  // 获取当前状态（0=灰色，1=蓝色，2=红色）
  let currentState = parseInt($cell.data('state'));
  
  // 切换状态：0→1→2→0循环
  let nextState = (currentState + 1) % 3;
  
  // 更新样式和状态记录
  $cell.removeClass('cell-grey cell-blue cell-red')
       .addClass(['cell-grey', 'cell-blue', 'cell-red'][nextState])
       .data('state', nextState);
});

这个方案的优势 #

• 完全避免了浏览器颜色格式差异的问题，不用纠结RGB还是颜色名
• 状态逻辑清晰，以后要扩展更多状态（比如加个黄色），只需要修改数组和取模值即可
• 样式与行为分离，代码可读性和维护性更强

备选方案：直接操作CSS颜色（不推荐） #

如果你坚持直接修改background-color，可以这样写（需要处理浏览器返回的RGB格式）：

$('tr > td').click(function () {
  const $cell = $(this);
  const currentColor = $cell.css('background-color');
  
  // 注意浏览器返回的是RGB字符串
  if (currentColor === 'rgb(128, 128, 128)') { // 对应grey
    $cell.css('background-color', 'blue');
  } else if (currentColor === 'rgb(0, 0, 255)') { // 对应blue
    $cell.css('background-color', 'red');
  } else { // 对应red或初始状态
    $cell.css('background-color', 'grey');
  }
});

但这个方案不推荐，因为不同浏览器可能对颜色的返回格式有差异，代码可读性也较差。

内容的提问来源于stack exchange，提问作者jbl