-5

我想防止使用 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>

有什么办法可以做到这一点？

4

3 回答 3

3

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; 
}
于 2013-05-25T21:50:10.790 回答
3

jsFiddle在这里。

用于indexOf()查看它是否已经具有该类。请注意，当类包含另一个类的一部分时，解决方案本身会导致问题，所以我稍微改变了它（新的解决方案有点难看，但是嗯）

function addClass(element, myClass) {
   if((" " +element.className+ " ").indexOf(" "+myClass+" ") == -1)
       element.className += ' ' + myClass; 
}
于 2013-05-25T21:53:58.207 回答
0

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

function addCLass(who,cname){
    var rx= RegExp('\\b'+cname+'\\b','g'),
    C=who.className.replace(rx,'').split(/\s+/).push(cname);
    who.className= C.join(' ');
}
于 2013-05-26T02:25:51.873 回答