在一个元素上添加两次相同的类[重复]

Question

最近我正在为我的工作对一个遗留项目进行一些重构，我可能偶然发现了一些“错误”的东西。

在框架内的某个地方，自定义页面加载器从端点读取controller/action，并将它们作为两个类应用到正文中。

确实可以这样说：

$('body').removeAttr("class").addClass(controller + ' ' + action);

index 作为控制器，cars 作为动作，身体看起来像：

$('body').removeAttr("class").addClass('index cars');
<body class="index cars">

到目前为止一切都很好（不完全）。

稍后再次匹配您要执行的特定元素：

$('.index.cars')

现在如果动作和控制器名称相同，就会出现问题。 应用了这两个类，假设cars/cars 看起来像这样：

<body class="cars cars">

选择器$('.index.cars') 可以很好地配合上述内容。

现在有趣的部分是，如果您尝试使用 jQuery 1.11.1 添加类，那么这将不起作用。它不能在一个元素上添加第二个具有相同名称的类。

所以这个：

$('body').removeAttr("class").addClass('cars cars');
<body class="cars">

不起作用:-(

在谷歌和这里搜索了一下，但找不到东西。

问题是：

在一个元素上拥有 2 次相同的类是否有效？如果是，那么除了创建带有类的选择器之外，还有什么具体原因会这样做吗？

Answer 1

一个元素有多个重复的类是有效的。在此处查看 Moz 开发人员参考：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/class

基本上，无论调用什么，它都会识别同一元素的两个实例，但会将其视为一个类。

要回答你的第二个问题，即某人使用它的原因……我个人想不出一个？

至于您上面的问题，您正在删除元素上的属性“类”，然后将其与类值一起添加回来。例如：<div class="car">变成<div>，然后变成<div class="controller action">

您可以使用.removeClass 替换.removeAttr

请看这里：http://api.jquery.com/removeclass/

希望有帮助吗？祝你好运！