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

从元素中删除类“dependent-task”。因此，下次单击复选框时，$（'。depentend-task'）是一个空的jQuery对象。为避免这种情况，请在页面加载后存储对jQuery对象的引用：

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

Answer 2

奥斯卡帕兹解决方案将正常运作。如果您不想保留对元素的引用，则可以定义另一个类来进行颜色更改。请参阅 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");