表格单元格的 JQuery 交换颜色

Question

我创建了一个表格单元格如下

<tr>
<td id = 'even'>row 8, cell 1</td>
<td  id = 'odd'>row 8, cell 2</td>
</tr>

颜色和字体大小使用以下 CSS 设置

 #even {    font-size : 10pt;    color : red;    background-color:yellow; }
 #odd {    font-size : 20pt;    color : white;    background-color:green; }

现在我想在单击按钮时交换偶数和奇数单元格的颜色

<button id='swapcolor' type="button" >Swap Colors</button>

字体大小也需要调换。

我一直在尝试这样做

$("#swapcolor").click(function (e) {

      $('table #even').css('background-color','green');
      $('table #odd').css('background-color','yellow');

});

$("#swapfont").click(function () {
      $('#even').css("font-size", "20pt");
      $('#odd').css("font-size", "10pt");
});

我的问题是如何捕获单元格的当前颜色

在此先感谢您的帮助

Answer 1

最好使用重写类而不是通过 JS 本身设置 CSS。以下代码将为 #even 和 #odd tds

切换一个类

CSS

 #even {    font-size : 10pt;    color : red;    background-color:yellow; }
 #odd {    font-size : 20pt;    color : white;    background-color:green; }

 #even.swapColor {    background-green; }
 #odd.swapColor {    background-yellow; }

j查询

$("#swapcolor").click(function (e) {
      $('table #even, table #odd').toggleClass('swapColor');
});