javascript - 在 jQuery 中更改背景颜色

Question

在我的 HTML 中，每个 td代表一个正方形。我只需要通过右键单击将这些方 block 更改为黄色(如果它们是白色的(默认情况下))和白色(如果它们是黄色的)。这是我的代码:

$('tbody').on('contextmenu', 'td', (e) => {
  const td = $(e.currentTarget);

  if (td.css('background-color') !== 'yellow') {
    td.css('backgroundColor', 'yellow');
  } else {
    td.css('backgroundColor', 'white');
  }

  e.preventDefault();
});

问题是黄色可以工作，但再次右键单击它再也不会返回白色。

Answer 1

这里遇到的问题是 css('background-color') getter 将返回 RGB 字符串值，而不是颜色名称。您当然可以检查这一点，但更简单的方法是使用 CSS 类来设置背景颜色，并在每次事件发生时简单地切换它:

$('tbody').on('contextmenu', 'td', (e) => {
  e.preventDefault();
  $(e.target).toggleClass('yellow');
});

.yellow {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>foo</td>
  </tr>
</table>