removeClass 함수가 제대로 작동하지 않습니다.

Question

사용자가 div를 선택하거나 선택 취소 할 수있는 함수를 작성했습니다. 자, 내가하려고했던 것은 을이라고 선택하고, 모든 것을 선택 해제하는 기능 이었지만, 내 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의를 선택하고 버튼을 누르 때 모든 div를 선택 취소하지 않고 일부만 선택 취소합니다.

어떻게 해결할 수 있습니까? 왜 작동하지 않습니까?

감사합니다.

Answer 1

한번에 변경이 for 루프 : getElementsByClassName()에서

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

반환 값은 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,' '); 
} 

, \b 수단 "단어 경계". hasClass()도 호출 할 필요가 없습니다. 클래스 문자열이 없으면 교체가 아무 것도하지 않기 때문입니다.

편집 — 주석에서 하이픈이 삽입 된 클래스 이름 (일반적인 규칙)에는 작동하지 않는다고 지적했습니다. 이 문제를 해결해야한다면 다음과 같이 작동합니다.

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

또는 일부 유사 콘텐츠가 해당됩니다.