toggleClass不加回類

Question

所以基本上我想做的是一個簡單的toggleClass，當一個複選框被點擊時，但問題是它刪除了類，但它不加回類。

下面是一個示例代碼：

$('#task-checkbox').click(function() { 
    $(".dependent-task").toggleClass("dependent-task"); 
}); 

全部代碼在這裏/的jsfiddle：http://jsfiddle.net/stan255/qxJ5d/2/

我不知道是什麼，似乎這裏是問題。

• 士丹利

Answer 1

簡單。此行

$(".dependent-task").toggleClass("dependent-task"); 

從元素中刪除類的「依賴任務」。因此，下次單擊複選框時，$（'。depentend-task'）是一個空的jQuery對象。爲避免這種情況，請在頁面加載後存儲對jQuery對象的引用：

var $dependentTask = $(".dependent-task"); 
$('#task-checkbox').click(function() { 
    $dependentTask.toggleClass("dependent-task"); 
}); 

Answer 2

Oscar Paz解決方案將正常工作。如果您不想保留對該元素的引用，則可以只定義一個不同的類來進行顏色更改。看到這個jsfiddle.net。

HTML：

<span class="dependent-task outstanding-task"> 
      Write 15 press release articles 
</span> 

CSS：

.outstanding-task { 
    color: red; 
} 

的jQuery：

$(".dependent-task").toggleClass("outstanding-task");