Javascript 在jQuery中更改背景颜色

在我的HTML中，每个

td

代表一个正方形。我只需要通过右键单击将这些正方形更改为黄色（默认情况下），如果它们是白色，则更改为白色。这是我的密码：

$('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();
});

---

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

这里的问题是

css（'background-color'）

getter将返回RGB字符串值，而不是颜色名称。您当然可以进行检查，但更简单的方法是使用CSS类设置背景颜色，并在每次事件发生时简单地切换背景颜色：

$（'tbody'）。on（'contextmenu'，'td'，（e）=>{
e、 预防默认值（）；
$（e.target）.toggleClass（'yellow'）；
});
.yellow{
背景颜色：黄色；
}

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


$（'tbody'）。on（'contextmenu'，'td'，（e）=>{
e、 预防默认值（）；
$（e.target）.toggleClass（'yellow'）；
});
.yellow{
背景颜色：黄色；
}

福
您必须使用黄色的RGB等效RGB（255，255，0）作为条件：


$（'tbody'）。on（'contextmenu'，'td'，（e）=>{
常数td=$（e.target）；
if（td.css（'background-color'）！='rgb（255，255，0）'{
td.css（'backgroundColor'，'yellow'）；
}
否则{
td.css（'backgroundColor'，'white'）；
}
e、 预防默认值（）；
});

正文
您必须使用黄色的RGB等效RGB（255，255，0）作为条件：


$（'tbody'）。on（'contextmenu'，'td'，（e）=>{
常数td=$（e.target）；
if（td.css（'background-color'）！='rgb（255，255，0）'{
td.css（'backgroundColor'，'yellow'）；
}
否则{
td.css（'backgroundColor'，'white'）；
}
e、 预防默认值（）；
});

正文
我们可以得到你的HTML吗？答案在第一条评论中，这个问题必须作为一个问题结束typo@treyBake它们是一样的。这个问题是由于
css（）
@rorymcrossan响应的格式造成的，真的吗？我以为
.css（）
所做的只是用key=>value添加到样式数组中？（因此背景色无效）@treyBake不，它允许使用驼峰大小写和连字符表示法：我们可以得到你的HTML吗？答案在第一条评论中，这个问题必须以typo@treyBake它们是一样的。这个问题是由于
css（）
@rorymcrossan响应的格式造成的，真的吗？我以为
.css（）
所做的只是用key=>value添加到样式数组中？（因此背景色无效）@treyBake不，它允许使用驼色和连字符表示法：我认为这里有一个输入错误。这不起作用，因为在您的示例中它没有被tbody包围，对吗？@cmprogram
tbody
将由渲染器自动为您插入，它必须存在于表中。公平地说，似乎我不熟悉.contextmenu调用。我想这里有一个输入错误。这不会起作用，因为在您的示例中它没有被tbody包围，对吗？@cmprogram渲染器会自动为您插入
tbody
，它必须存在于表中。公平地说，我似乎不熟悉.contextmenu调用。