jQuery 屬性與樣式（五）

在做某些效果的時候，可能會針對同一節點的某一個樣式不斷的切換，也就是addClass與removeClass的互斥切換，例如隔行換色效果

jQuery提供一個toggleClass方法用於簡化這種互斥的邏輯，透過toggleClass方法動態添加刪除Class，一次執行相當於addClass，再次執行相當於removeClass

toggleClass( )方法：在匹配的元素集合中的每個元素上新增或刪除一個或多個樣式類別,取決於這個樣式類別是否存在或值切換屬性。即：如果存在（不存在）就刪除（新增）一個類別

toggleClass( className )：在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類別名稱

toggleClass( className, switch )：一個布林值，用於判斷樣式是否應該被新增或移除

toggleClass( [switch ] )：一個用來判斷樣式類別新增還是移除的布林值

toggleClass( function(index, class, switch) [, switch ] )：用來傳回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類別作為參數

註：

toggleClass是互斥的邏輯，也就是透過判斷對應的元素上是否存在指定的Class名，如果有就刪除，如果沒有就增加

toggleClass會保留原有的Class名後新增，透過空格隔開

下面我們來寫一個實例

#

       
  
 
 
php中文网
 
php.cn
 
 
 
php中文网
 
php.cn
 
 
 
php中文网
 
php.cn
 
 
 
php中文网
 
php.cn
 
 
 
php中文网
 
php.cn