'toggleClass` - 如何在两个不同的``类名'之间切换'

Question

我想toggle 2个不同的类。 （A b），但我没有得到结果。 我的代码有什么问题？

$('button').on('click', function() { 
 
    $('div').toggleClass("A B"); 
 
});

div{ 
 
    height:20px; 
 
} 
 
.A{ 
 
    border:1px solid red; 
 
} 
 

 
.B{ 
 
    border:1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div> 
 
<button>Color Change</button>

Answer 1

给你的div一个 '启动' 类。否则，将首先“切换上都”，下“切换都关闭”等

---

由于两者都设定边界，最后应用的类被使用，而另一个被忽略，所以因此你不会看到'红色'边框。

认为它像在之间切换一个 class - on或off。如果你从开始没有类，那么按钮将添加类（可以理解）。

如果您使用两个类别进行切换，则应用相同的规则。你从开始都关闭，然后按钮将切换都在 - 由于CSS的顺序/ CSS的特殊性，第二个将覆盖第一个CSS定义。

所以，为了'切换'，你需要从'开'位置开始，一个在'关'位置。你去了！一旦按下按钮，就会从开启到关闭，反之亦然。

$('button').on('click', function() { 
 
    $('div').toggleClass("A B"); 
 
});

div { 
 
    height: 20px; 
 
} 
 
.A { 
 
    border: 1px solid red; 
 
} 
 
.B { 
 
    border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="A"></div> 
 
<button>Color Change</button>

Answer 2

$('button').on('click', function() { 
 
    $('div').toggleClass("A B"); 
 
});

div{ 
 
    height:20px; 
 
} 
 
.A{ 
 
    border:1px solid red; 
 
} 
 

 
.B{ 
 
    border:1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="A"></div> 
 
<button>Color Change</button>

Answer 3

无需切换两个类。您需要分配一个课程，您可以切换另一个课程。

HTML

<div class="A"></div> 
<button>Color Change</button> 

JQUERY

$('button').on('click', function() { 
    $('div').toggleClass("B"); 
}); 

CSS

div{ 
    height:20px; 
} 
.A{ 
    border:1px solid red; 
} 

.B{ 
    border:1px solid blue; 
} 

JSFIDDLE DEMO

如果你在这里看到的逻辑很简单。当您单击该按钮时，它会将名为B的附加类添加到div中。一旦你点击按钮，你的div代码就会变成这样<div class="A B"></div>

所以在你的CSS中A和B的顺序是很重要的。例如，如果您将B class移至A class的顶部，那么您将无法获得理想的结果。

不工作的CSS：

div{ 
    height:20px; 
} 
.B{ 
    border:1px solid blue; 
} 
.A{ 
    border:1px solid red; 
} 

否则，您可以使用关键字important，这样就不会担心秩序，但在实践中并不好。