Question

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

问题是黄色有效，但是再次右键单击它永远不会再次变为白色。

Answer 1

您这里遇到的问题是css('background-color')吸气剂将返回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>

Answer 2

您必须使用黄色的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>

在jQuery中更改背景颜色

2 个答案: