在一个元素上添加两次相同的类

时间:2014-09-29 18:53:30

标签: javascript jquery html css class

最近我正在为我的工作做一些遗留项目的重构,我偶然发现了一些问题" buggy"可能。

在框架内的某个地方,自定义页面加载器从端点读取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">

不起作用: - (

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

问题是:

在一个元素上有两次相同的类是否有效?如果是,那么除了创建带有类的选择器之外,是否有人会这样做?

1 个答案:

答案 0 :(得分:1)

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

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

要回答你的第二个问题,有人利用这个问题......我个人想不到一个?

关于上面的问题,您要删除元素上的属性“class”,然后将其添加回类值。例如:<div class="car">变为<div>,然后变为<div class="controller action">

您可以使用.removeClass替换.removeAttr

见这里:http://api.jquery.com/removeclass/

希望有帮助吗?祝你好运!