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

Question

我使用这个answer来包含一个在两个css类之间切换的切换：两个不同大小的表头单元格，它们是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">