javascript - jquery 只允许一个元素上的一组类中的一个？

Question

我有一个元素，它使用 jQuery 动态地添加和删除了一些类。我想确保在给定时间我在元素上只有一组类中的一个。

例如，我可以拥有定义字体颜色、背景颜色、边框颜色等的 .blue_element 类，但我不希望它与 .red_element 类或 . yellow_element 类，但我不介意它与 .small_element 类或 .big_element 类同时打开。

当前方法:

$('#target_element').removeClass('yellow_element').removeClass('red_element').addClass('blue_element')

这工作正常，但似乎会产生错误风险，例如如果我添加了一个 .purple_element 类但忘记修改我的删除代码。

与我的示例相比，我在更大范围内执行此操作，并且可能会非常频繁地添加和删除类，因此如果我这样做的话，我预计会犯一些愚蠢的错误。有没有更有效的方法来做到这一点？

Answer 1

不要使用 jQuery，而是使用原生方法

document.getElementById("target_element").className = 'blue_element';

以上代码将删除所有类并仅保留/添加“blue_element”；