removeClass函数没有'工作不正常

removeClass function doesn't work properly

本文关键字：工作 不正常 函数 removeClass      更新时间：2023-09-26

我编写了一些函数，允许用户通过单击来选择和取消选择div。现在，我试图做的是一个函数，一旦按下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,' ');
    }
}

这是取消选择所有

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

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

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

谢谢！

尝试更改for循环：

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

getElementsByClassName()的返回值是NodeList，而不是数组，并且是"live"。这意味着，当您通过移除类来更改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,' ');
}

或者这个主题的一些变体。

相关文章：