removeClass函數無法正常工作

Question

我編寫了允許用戶通過單擊來選擇和取消選擇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,' ');
    }
}

這是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,' ');
}

或該主題的一些變化。