MooTools if/then/else基于一个css类的存在切换

我想切换一个类并执行其他基于css类分配给特定div的其他操作。MooTools if/then/else基于一个css类的存在切换

我正在使用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

来源

2010-12-05 brent

displayis = $$('div.loginbox').hasClass('hidden'); - >这是相当多余的，因为它确实hasClass到HTML集合的所有成员，推的结果到一个数组。

重写：

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

它会返回一个元素，如果它有两个班。

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

来源

2010-12-05 17:30:50

我解决了我的问题，将'if（displayis）{'改为'if（displayis ==“true”）{'。我不太清楚为什么会这样。 – brent 2010-12-06 20:27:15

MooTools if/then/else基于一个css类的存在切换

回答

相关问题