removeClass函数无法正常工作

我编写的函数允许用户通过单击选择和取消选择div。 现在，我试图做的是一个function，一旦按下a ，取消选择一切，但它只取消选择我的一些 div。 这是代码：

var divs = document.getElementsByClassName('fuori'); for(i = 0, j = divs.length; i < j; i++){ divs[i].addEventListener('click', function(){ if(!hasClass(this, 'selected')){ this.className = this.className + " selected"; } else { removeClass(this, 'selected'); } }); } 

removeClass函数就是这个

 function removeClass(ele,cls) { if (hasClass(ele,cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); ele.className=ele.className.replace(reg,' '); } } 

这是deselectAll

 function deselectAll(){ var selected = document.getElementsByClassName('selected'); alert(selected.length); for (i = 0; i < selected.length; i++){ removeClass(selected[i], 'selected'); } } 

通过单击选择和取消选择无缝地工作，但是当我选择一些div并按a时它不会取消选择每个div，而只取消其中的一些。

我怎么能解决这个问题？ 为什么它不起作用？

谢谢！

Answer 1

尝试更改for循环：

 for (var i = selected.length; --i >= 0; removeClass(selected[i], 'selected')); 

getElementsByClassName()的返回值是NodeList，而不是数组，它是“实时”的。 这意味着当您通过删除类来更改DOM时，您也会更改列表。

通过倒退，你可以避免这个问题。 你也可以这样做：

 while (selected.length) removeClass(selected[0], 'selected'); 

顺便说一句，你用来删除类的正则表达式可能更简单：

 function removeClass(ele,cls) { var reg = new RegExp('\\b' + cls + '\\b', 'g'); ele.className=ele.className.replace(reg,' '); } 

在JavaScript正则表达式中， \b表示“单词边界”。 此外，没有必要调用hasClass()因为如果类字符串不存在，替换就不会做任何事情。

编辑 – 在评论中指出，这不适用于具有嵌入连字符的类名，这是一种常见的约定。 如果你需要处理它，那么我认为这将有效：

 function removeClass(ele,cls) { var reg = new RegExp('\\b' + cls.replace(/-/g, '\\b-\\b') + '\\b', 'g'); ele.className=ele.className.replace(reg,' '); } 

或该主题的一些变化。