변수가 for 루프 내에서 정의되지 않은 변수로 변합니다.

Question

저는 현재 작업중인 javascript 함수로 전쟁 중입니다.

for 루프 내부에서 루프 내에서 "visible"클래스로 모든 요소를 ​​반복합니다. 두 가지 작업을 수행 중입니다.

1. elements [i] .removeAttribute ("class");
2. elements [i] .setAttribute ("class", "hidden");

어떤 이유로 든 1 개만 유효합니다. 2는 다음과 같은 오류를 생성합니다.

Uncaught TypeError: Cannot call method 'setAttribute' of undefined 

console.log를 사용하여 [i]를 기록 할 때도; 첫 번째 console.log를 호출 한 후 요소가 있지만 두 번째 console.log 요소 [i]가 '정의되지 않음'입니다.

내 노트북이 여기에없는 경우 무엇이 내가 미쳐 버리는 지, 너무 비싸서 그것은 지금 쯤이상 파괴되었을 것입니다. ..

function hide_visable_elements() 
{ 
    // remove body EventListener 
    var body = document.getElementsByTagName("body"); 
    body[0].removeEventListener("click", hide_visable_elements, true); 

    var elements = document.getElementsByClassName("visible"); 

    for (var i = 0; i < elements.length; i++) 
    { 
     console.log(elements[i]); // Works like a swiss clock 

     elements[i].removeAttribute("class"); 

     console.log(elements[i]); // why elements[i] is 'undefined' now ??? 

     elements[i].setAttribute("class", "hidden"); // << turns to useless code 
    } 
} 

Answer 1

getElementsByClassName은 라이브 NodeList이므로 항목의 className을 변경하면 즉시 전체 목록에 영향을줍니다. 나는 querySelectorAll insead의 사용을 권장합니다.

플러스 var body = document.getElementsByTagName("body"); 대신 document.body을 사용하십시오.

Answer 2

getElementsByClassName이 라이브 인 즉,이 참조하는 요소를 변경할 때 자신을 업데이트하는 NodeList을 반환하기 때문입니다

: 도움말 :(여기

는 함수의 NodeList에있는 요소에서 class 속성을 제거하면 더 이상 visible 클래스 이름이 없으므로 목록에서 제거됩니다.

실제로 속성을 제거 할 필요는 없습니다. 그냥 설정하면 작업을 수행 할 수 있습니다. 그러나 NodeList 한 이후에 포함 된 요소를 조작으로서, 사용자가 (사용자가 그 하나 개의 요소를 변경할 때마다 같이 길이가 하나 감소되므로이를 제거) 그것을 통해 거꾸로 카운트해야 변화 :

for (var i = elements.length - 1; i >= 0; i--) { 
    elements[i].setAttribute("class", "hidden"); 
} 

Answer 3

클래스 getElementsByClassName("visible");을 사용하여 요소를 선택 했으므로 문제는 elements[i].removeAttribute("class");이라고 생각합니다. 나는 클래스 속성을 요소에서 완전히 제거 할 때 상황이 잘못 될 것으로 생각합니다.

코드를 수정 해보십시오. 클래스 속성을 사용하여 선택한 동일한 요소를 사용하려는 경우 특성 클래스를 제거하지 않는 것이 좋습니다.