javascript - Jquery 在表行中的两个类之间切换

Question

我正在使用这个 answer包括在两个 css 类之间切换的切换:twotablecell 和 tablecell，它们是两个不同大小的表格标题单元格，它们在 css 中具有不同的大小。

当单击我的按钮 ID:sizeTog 时，它会将表标题类属性更改为 tablecell，但不会将其更改回 twotablecell再次点击时。

$('#sizeTog').on('click', function() {
  $('table thead tr .twotablecell').toggleClass("twotablecell tablecell");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th class="twotablecell">
        Name
      </th>
    </tr>
  </thead>
</table>

<input id="sizeTog" type="button" value="toggle size">

我尝试将需要切换的元素更改为:table thead tr th.twotablecell 以使其更具体。

只有当我将 Jquery 切换元素更改为 table thead tr th 时，它才会相应地工作。

但是，这是我有很多不同的表标题列，我希望它们的大小不同于 twotablecell 和 tablecell。

Answer 1

问题是因为在第二次单击时，您要查找的元素不再具有 .twotablecell 类 - 第一次单击将其删除。

通过另一种方式选择它，例如使用未删除的不同类:

$('#sizeTog').on('click', function() {
  $('table thead tr .headercell').toggleClass("twotablecell tablecell");
});

.tablecell { color: #C00; }
.twotablecell { color: #0C0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th class="headercell twotablecell">
        Name
      </th>
    </tr>
  </thead>
</table>

<input id="sizeTog" type="button" value="toggle size">