Javascript 使用'；检查添加/删除CSS类的更简洁方法；hasClass'；在jQuery中？ 概述

在jQuery中，我会不时检查某种条件，然后根据结果向元素添加/删除cssClass

在调用add（remove）类之前，我总是检查该类是否已经被应用

在代码中，这转换为 有没有更整洁的方法来写上面的内容？ 我确信一定有更好的方法来实现这一点，因为嵌套的if语句对我来说很难闻

切换的清晰度 只是一个澄清说明（在下面的答案之后添加）。这里需要注意的是，

toggleClass（className）

不够，因为我明确希望根据条件检查删除或添加，并且需要说明“toggle”不同步的原因。（Adam在下面对Rob答案的评论中给出了一个例子）。

使用该方法，如果类存在，则删除该类；如果类不存在，则添加该类

var myElement = $('#something'),
    someClass = 'coolClass';

myElement.toggleClass(someClass, someCondition);

回顾您当前的代码，我补充说没有必要使用

hasClass

。jQuery自动正确处理请求：类名只添加一次，因此使用

$（“”）。addClass（“xxx”）。addClass（“xxx”）。attr（“class”）

将返回

x

，而不是

xxx

var myElement = $('#something'),
someClass = 'coolClass';
myElement.toggleClass(someClass, someCondition);

---

toggleClass

基本上为您检查。如果你做了一个

toggleClass（'class'，true）

它实际上只会把这个类放在那里，如果它还没有，并且永远不会添加多个同名的类。

自从jQuery 1.4以来，使用

toggleClass

函数有一种更简洁的方法。请参阅详细信息。

这样也可以

if (someCondition) {
    $(myElement+":not(.someClass)").addClass(someClass);
}else{
    $(myElement+":has(.someClass)").removeClass(someClass);
}

.addClass（）仅在类不存在时添加，而.removeClass（）仅删除现有的类，因此以下操作应有效：

if (someCondition) {
  myElement.addClass(someClass);
} else {
  myElement.removeClass(someClass);
}

---

呸！你以16秒的优势击败了我（但是，您忘记了

condition

@AdamTerlson:您不需要条件，OP只是想从元素中切换类名。@Purmou听起来像是想根据条件切换某些东西。

If（condition）AdC类，否则ReaveCuass这是基于一个条件切换的，而不仅仅是一个切换。考虑调用他的代码两次，每次条件都是真的。这将使类保持不变。在RobW的代码中，第二个调用将被删除。@ RB W-是的，亚当是正确的，我道歉，因为这个问题在我的WI中没有得到更清楚的解释。我会修正的accordingly@Adam-很好，我很明显知道
toggleClass
，但从来都不知道1.3中添加的
switch
参数。我不想要一个简单的toggleas（如pritaeas所说）这种情况正是我想说的here@beardtwizzle太好了！很高兴我能为你回答你的问题！@AdamTerlson当我使用这个时，我发现每次调用
toggleClass
时，
addClass
或
removeClass
仍在被调用。
if (someCondition) {
  myElement.addClass(someClass);
} else {
  myElement.removeClass(someClass);
}