在jQuery中更改背景颜色[重复]答案

【问题标题】：Change background color in jQuery [duplicate]在jQuery中更改背景颜色[重复]
【发布时间】：2018-12-15 14:18:42
【问题描述】：

在我的 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();
});

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

【问题讨论】：

我们可以要你的 HTML 吗？
答案在第一条评论中，这个问题必须作为错字关闭
@treyBake 他们是一回事。问题是由于来自css() 的响应格式造成的
@RoryMcCrossan 真的吗？我认为.css() 所做的所有事情都是用 key => value 添加到样式数组中？（因此 backgroundColor 无效）？
@treyBake nope，它允许骆驼大小写和连字符表示法：jsfiddle.net/reusy8x3

标签： javascript jquery

【解决方案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>

【讨论】：

我认为这里有一个错字。这不起作用，因为在您的示例中它没有被 tbody 包围，对吧？
@cmprogram tbody 会被渲染器自动插入，它必须存在于表格中。
很公平，看来我对 .contextmenu 调用并不熟悉。

【解决方案2】：

你必须使用 yellow 的 RGB 等效 rgb(255, 255, 0) 作为条件：

$('tbody').on('contextmenu','td',(e)=>{
  const td = $(e.target);
  if(td.css('background-color') !== 'rgb(255, 255, 0)'){
    td.css('backgroundColor','yellow');
  }
  else{
    td.css('backgroundColor','white');
  }
  e.preventDefault();
});

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

虽然最好使用 jQuery 的 toggleClass() 代码行数最少：

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

.yellow{
  background-color: yellow;
}

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

【讨论】：