javascript - MooTools if/then/else 切换基于 css 类的存在

Question

我正在尝试切换一个类并根据分配给特定 div 的 css 类执行其他几个操作。

我正在使用 MooTools 1.2.5。

div 看起来像这样:

<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 而它显然是 false。

关于上述脚本的一件奇怪的事情是，如果我将“登录框”更改为一个 id 并相应地调整脚本，它就可以正常工作。我使用的 CMS 要求“登录框”是一个类，而不是一个 div。

简单地使用“.toggleClass('hidden')”也很有效，除了我想做的不仅仅是切换类。

感谢您的宝贵时间。

-布伦特

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
}
...