Element.className이 undefined를 반환합니까?

은 [질문 대체 디버깅 방법이 나에게 지적 된 후에 변경되었습니다 나는 문제의 실제 원인을 발견 - 감사 뾰족한와 user2864740]Element.className이 undefined를 반환합니까?

내가 모방하기 위해 노력하고있어 (소스에 엿봄을 복용하기 전에 code of) 부트 스트랩의 드롭 다운 메뉴.

모든 a.dropdown-toggle에 onclick 수신기를 연결합니다. 리스너는 노드의 부모를 잡고 노드의 부모를 사용하여 실제 드롭 다운 메뉴를 찾고 열린 클래스를 추가하거나 제거합니다.

드롭 다운 메뉴 노드 (ul 요소)를 가져온 후 element.className을 사용하지만 정의되지 않은 값을 반환합니다. jquery의 .attr ('class')가 예상 된 결과를 반환하기 때문에 이것은 특히 이상합니다.

jquery 1.10.2를 사용하고 있습니다.

HTML :

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a> 
    <ul class="dropdown-menu open"> 
     <li><a href="#">Profile</a></li> 
     <li><a href="#">Settings</a></li> 
     <li><a href="#">Privacy</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Logout</a></li> 
    </ul> 
</li>

CSS :

li.divider { 
    border-top: solid 1px grey; 
    padding: 0px 0px; 
} 

.dropdown-menu { 
    position: absolute; 
    display: none; 
    border: 1px solid grey; 
    list-style-type: none; 
} 

.dropdown a:link, .dropdown a:visited { 
    text-decoration: none; 
    color: black; 
} 

.dropdown-menu.open{ 
    display: block; 
}

자바 스크립트 :

$(document).ready(function(){ 

    $('a.dropdown-toggle').click(function(e){ 

     e.preventDefault(); 

     dropDownMenu = $(this.parentNode).find('.dropdown-menu'); // does not return dropdown menu 

     console.log("According to jquery, class name is: " + dropDownMenu.attr('class')); // prints dropdown-menu 
     console.log("According to .className, class name is: " + dropDownMenu.className); //prints undefined 

     if (dropDownMenu.attr('class').indexOf('open') > -1) { // previously dropDownMenu.className.indexOf('open') > -1 
      alert('removing class'); 
     }else{ 
      alert('adding class'); 
     } 

    }); 

});

출처

2014-05-24 user2316667

jQuery 이벤트 처리기 내에서'this' *는 이벤트의 대상을 참조합니다. http://jsfiddle.net 테스트 케이스를 작성하여 오해가 될 가능성이 있으므로 문제를 재현하십시오. [ "jQuery가 핸들러를 호출 할 때이 키워드는 이벤트가 전달되는 요소에 대한 참조입니다."] (http://api.jquery.com/on/) – user2864740

'alert()'함수는 다음과 같습니다. 이와 같은 디버깅 작업에 대한 끔찍한 선택입니다. 대신'console.log()'를 사용하면'this'가 실제로'' 노드라는 것을 알 수 있습니다. – Pointy

나는 이것을 지금 지우겠다 ... 감사한다. 그것이 무례하지 않다면 답을 쓰고 싶습니다. 받아 들일 것입니까? – user2316667

dropDownMenu.attr('class');

dropDownMenu는 JQuery와 객체는 DOM의 객체가 아닌 지금 -이다.

출처

2014-05-24 04:05:00

네,하지만'dropDownMenu.get (0)'과'.className'을 사용하여 DOM 객체를 얻을 수 있습니다 ... – algorhythm

그 트릭을 주셔서 감사합니다 :) –

Element.className이 undefined를 반환합니까?

답변

관련 문제