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
}
...
精彩评论