removeClass函数无法正常工作 [英] removeClass function doesn't work properly

问题描述

我编写了允许用户通过单击来选择和取消选择div的函数.现在，我试图做的是一个功能，一旦按下 a ，它就会取消选择所有内容，但是只会取消选择我的divs中的 some .这是代码:

I wrote functions that allow the user to select and de select divs by clicking on them. Now, what i was trying to do was a function that, once pressed a, deselects everything, but it only deselect some of my divs. Here is the code:

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函数是这个

removeClass function is this

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，而是仅取消其中的一部分.

Selecting and deselecting by clicking works seamlessly, but when i select some divs and press a it doesn't deselect every div, but only some of them.

我该如何解决?为什么不起作用?

How could i fix this? and why doesn't it work?

谢谢！

推荐答案

尝试更改for循环:

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

getElementsByClassName()的返回值是NodeList，而不是数组，它是活动的".这意味着，当您通过删除类来更改DOM时，您也在更改列表.

The return value from getElementsByClassName() is a NodeList, not an array, and it's "live". That means that as you change the DOM by removing the class, you're changing the list too.

通过后退，可以避免此问题.您也可以这样做:

By going backwards, you avoid the problem. You could also do this:

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

通过用于删除类的正则表达式可以更简单:

By the way the regex you're using to remove the classes could be simpler:

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

在JavaScript正则表达式中，\b表示单词边界".另外，调用hasClass()也没有意义，因为如果不存在类字符串，替换将不会执行任何操作.

In a JavaScript regular expression, \b means "word boundary". Also there's no point calling hasClass() because the replacement just won't do anything if the class string isn't present.

edit —在评论中指出，这不适用于带有嵌入式连字符的类名，这是一种常规约定.如果您需要处理该问题，那么我认为这会起作用:

edit — It's pointed out in a comment that this doesn't work for class names with embedded hyphens, a common convention. If you need to deal with that, then I think this would work:

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

或该主题的一些变体.

这篇关于removeClass函数无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！