开发者

MooTools if/then/else toggling based on presence of a css class

I'm trying to toggle a class and perform several other actions based on the css class assigned to a particular div.

I'm using MooTools 1.2.5.

The div looks like this:

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

I have a link on the page that looks like this:

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

For visitors with Javascript enabled the form is automatically hidden by my script.

<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.loginbo开发者_开发技巧x').addClass('hidden');
                // do several other things          
            };

        });
    }); 

}); 

</script>

The first time the "Show/Hide Login" link is clicked everything appears to work fine and the div with the class "loginbox" appears on the screen.

The second time "Show/Hide Login" link is clicked nothing happens. Using console.log to try to figure out what is going on it looks like the first part of the if statement is being evaluated as true when its clearly false.

A curious thing about the above script is if I change the "loginbox" to a id and adjust the script accordingly it works fine. I'm using a CMS which requires the "loginbox" be a class, not a div.

Simply using ".toggleClass('hidden')" also works great except I want to do more than just toggle the class.

Thanks for your time.

-Brent


displayis = $$('div.loginbox').hasClass('hidden'); -> this is pretty redundant as it does hasClass to all members of the html collection, pushing the results into an array.

rewrite to:

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

it will return an element if it has both classes.

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜