Question

我想使用JavaScript防止元素上出现重复的类名。

当我运行以下代码时，我得到了两次类名"Test 1"。

这是我的HTML：

<body>
    <div id="foo">Hey</div>
</body>

和我的Javascript：

function addClass(element, myClass) {
   var add = element.className += ' ' + myClass; 
}

addClass(foo,'Test1');
addClass(foo,'Test1');
addClass(foo, 'Test2');

我希望我的结果是：

<div id="foo" class=" Test1 Test2">Hey</div>

而不是

<div id="foo" class=" Test1 Test1 Test2">Hey</div>

有什么方法可以实现这个目标吗？

Answer 1

添加课程时使用string.contains()方法;尝试像

这样的东西

function addClass(element, myClass) {
   if(!element.className.contains(myClass))
       element.className += ' ' + myClass; 
}

修改

使用string.split(" ")打破类名（以避免匹配部分类名），然后使用indexOf检查是否已添加该类。像

这样的东西

function addClass(element, myClass) {
   if(element.className.split(" ").indexOf(myClass)==-1)
       element.className += ' ' + myClass; 
}

Answer 2

jsFiddle here.

使用indexOf()查看是否已有该课程。请注意，当包含包含另一个类的类时，解决方案本身会导致问题，所以我稍微改了一下（新解决方案有点难看，但是meh）

function addClass(element, myClass) {
   if((" " +element.className+ " ").indexOf(" "+myClass+" ") == -1)
       element.className += ' ' + myClass; 
}

Answer 3

我想如果你要添加一个你希望该类具有优先权的类 - 如果它已经存在但是在另一个类的级联中被取代，则将旧实例移到类定义的末尾 -

function addCLass(who,cname){
    var rx= RegExp('\\b'+cname+'\\b','g'),
    C=who.className.replace(rx,'').split(/\s+/).push(cname);
    who.className= C.join(' ');
}

防止具有重复类名的元素

3 个答案: