Javascript '；toggleClass`-如何在两个不同的“类”名称之间“切换”

我想切换两个不同的类。但是我没有得到结果。 我的代码有什么问题

$（'button'）。在（'click'，函数（）{
$（'div'）。切换类别（“A B”）；
});
div{
高度：20px；
}
.A{
边框：1px纯红；
}
.B{
边框：1px纯蓝色；
}

换颜色
给你的女主角上“入门”课。否则，第一个将“打开两个开关”，下一个将“关闭两个开关”，等等


由于两者都在设置边框，所以最后应用的类将被使用，而另一个类将被忽略，因此您将不会看到“红色”边框

把它想象成在一个类之间切换——开或关。如果开始时没有类，那么按钮将添加类（可以理解）

如果要切换两个类，则应用相同的规则。首先关闭这两个选项，然后该按钮将同时打开这两个选项-并且由于应用的css顺序/css的特殊性，第二个选项将覆盖第一个css定义

因此，为了“切换”，您需要从一个处于“打开”位置和一个处于“关闭”位置开始。就这样！按下按钮后，一个按钮将从on切换到off，另一个按钮将从on切换到off


$（'button'）。在（'click'，function（）上{
$（'div'）。切换类别（“A B”）；
});
div{
高度：20px；
}
.A{
边框：1px纯红；
}
.B{
边框：1px纯蓝色；
}

颜色变化
$（'button'）。在（'click'，函数（）{
$（'div'）。切换类别（“A B”）；
});
div{
高度：20px；
}
.A{
边框：1px纯红；
}
.B{
边框：1px纯蓝色；
}

颜色更改
无需切换这两个类。一个需要分配的类和另一个可以切换的类

HTML

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

CSS

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

.B{
   border:1px solid blue;
}


如果你看到这里，逻辑很简单。当您单击该按钮时，它会将名为
B
的附加类添加到
div
中。单击该按钮后，您的div代码将如下所示

所以在CSS中A和B的顺序是很重要的。例如，如果将
B类
移动到
A类
的顶部，则不会得到所需的结果

不工作CSS:

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

否则，您可以使用
重要的
关键字，这样它就不会担心顺序，但在实践中并不好。
这个答案与以前给出相同答案的人有什么不同？请不要重复回答。@RahulDesai如果我们两人同时发布答案会怎么样？这个问题只有一个答案，我同意你的看法。问题是，我得到的
元素是从服务器端生成的，没有类名。在这种情况下，我该如何管理？@3gwebtrain：您可能能够以jquery的ready函数为目标，并将类附加到页面加载上？是的，有很多元素。此外，我不要求在单击时始终使用其他类名。我猜点击事件放置一些条件可以吗？
div{
    height:20px;
}
.B{
   border:1px solid blue;
}
.A{
   border:1px solid red;
}