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