MooTools if/then/else基於一個css類的存在切換

Question

我想切換一個類並執行其他基於css類分配給特定div的其他操作。

我正在使用MooTools 1.2.5。

股利如下：

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

我有一個看起來像這樣的頁面上的鏈接：

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

對於使用JavaScript遊客啓用形式是由我的腳本自動隱藏。

<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」在div出現在屏幕上。

第二次單擊「顯示/隱藏登錄」鏈接沒有任何反應。使用console.log來試圖弄清楚發生了什麼，它看起來像if語句的第一部分，當它明顯錯誤時，它被評估爲true。

關於上述腳本的一個奇怪的事情是，如果我將「登錄箱」更改爲一個id並相應地調整腳本，它工作正常。我使用的CMS要求「登錄框」是一個類，而不是一個div。

只要使用「.toggleClass（'hidden'）」，除了我想要做的不僅僅是切換類，還可以很好地工作。

謝謝你的時間。

-Brent

Answer 1

displayis = $$('div.loginbox').hasClass('hidden'); - >這是相當多餘的，因爲它確實hasClass到HTML集合的所有成員，推的結果到一個數組。

重寫：

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

它會返回一個元素，如果它有兩個班。

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