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">

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

1 个答案: