CSS 클래스의 존재 여부에 따라 MooTools if/then/else 전환

Question

클래스를 토글하고 특정 div에 할당 된 CSS 클래스를 기반으로 여러 다른 작업을 수행하려고합니다.

MooTools 1.2.5를 사용하고 있습니다.

사업부는 다음과 같습니다 : 자바 스크립트와 방문자를위한

<a href="#" class="loginlink">Show/Hide Login</a> 

양식이 자동으로 내 스크립트에 의해 숨겨져 활성화 :

<div class="loginbox"> Login Form Here </div> 

나는이처럼 보이는 페이지의 링크가 있습니다.

<script type="text/javascript"> 

window.addEvent('domready',function() { 

    $$('div.loginbox').addClass('hidden'); 

    $$('a.loginlink').each(function(linkitem){ 

     linkitem.addEvent('click', function(i){ 

      displayis = $$('div.loginbox').hasClass('hidden'); 

      if (displayis) { 
       $$('div.loginbox').removeClass('hidden'); 
       // do several things 
      } else { 
       $$('div.loginbox').addClass('hidden'); 
       // do several other things   
      }; 

     }); 
    }); 

}); 

</script> 

"연락처보기/숨기기 로그인"링크가 모든 것을 클릭 처음으로 잘 작동하는 나타나고 클래스 "loginbox"와 사업부가 화면에 나타납니다.

두 번째로 "로그인 표시/숨기기"링크를 클릭하면 아무 일도 일어나지 않습니다. console.log를 사용하여 어떤 일이 일어나고 있는지 알아 내려고합니다. if 문의 첫 부분이 분명히 거짓 일 때 true로 평가됩니다.

위의 스크립트에 대해 궁금한 점은 ID로 "loginbox"를 변경하고 그에 따라 스크립트를 조정하면됩니다. 나는 "loginbox"클래스가 아닌 div가 필요한 CMS를 사용하고 있습니다.

단순히 ".toggleClass ('hidden')"을 사용하면 클래스를 전환하는 것 이상을 원할뿐입니다.

감사합니다.

-Brent

Answer 1

displayis = $$('div.loginbox').hasClass('hidden'); ->이 배열로 결과를 밀어 HTML 모음의 모든 구성원에게 hasClass을 마찬가지로이 꽤 중복입니다. 이 두 클래스가있는 경우가 요소를 반환합니다

var theHiddenEl = document.getElement("div.loginbox.hidden"); 

:에

재 작성.

if (theHiddenEl) { 
    theHiddenEl.toggleClass("hidden"); // or removeClass etc. 
    // ... more stuff 
} 
...