Variables javascript non réglées - vérifiées via firebug

Question

Je suis nouveau sur stackoverflow!

J'ai des problèmes avec un morceau de code pour le site Web de mon entreprise, en utilisant jquery. J'essaie de suivre les clics sur deux boutons et définir une variable/s qui peut ensuite être utilisé pour déterminer un plan d'action. Fondamentalement, c'est une liste déroulante qui s'anime si la variable est définie sur true et une autre si elle est définie sur false. J'ai initiallised les variables les deux faux pour commencer, puis à travers le cours de cliquer, ils doivent être réglés sur true ou false selon la situation:

var boollogin = false; 
var boolregister = false; 

$(document).ready(function(){ 
    $('#slidedownlogin').hide(); 
    $('#details_add_area').hide(); 
    $('#emailconfirmation').hide(); 
    $('#register').toggle(function(){ 
     if(boollogin == false){ 
     $('#login_area').hide(); 
     $('#register_area').show(); 
     $('#details_add_area').hide(); 
     $('#slidedownlogin').animate({'height':'235px'},1500, 'easeOutExpo'); 
     }else{ 
     $('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo',function(){ 
      $('#login_area').hide(); 
      $('#details_add_area').hide(); 
      $('#register_area').show(); 
      $('#slidedownlogin').animate({'height':'235px'},1500, 'easeOutExpo'); 
      }); 
     } 
     boolregister = true; 
    } , function(){ 
    $('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo', function(){ 
      $('#slidedownlogin').children().hide(); 
     }); 
     boolregister = false; 
     boollogin = false; 
    }); 

    $('#login').toggle(function(){ 
     if(boolregister == false){ 
      $('#register_area').hide(); 
      $('#details_add_area').hide(); 
      $('#login_area').show(); 
      $('#slidedownlogin').animate({'height':'220px'},1500, 'easeOutExpo'); 
     }else{ 
      $('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo',function(){ 
      $('#register_area').hide(); 
      $('#details_add_area').hide(); 
      $('#login_area').show(); 
      $('#slidedownlogin').animate({'height':'220px'},1500, 'easeOutExpo'); 
      }); 
     } 
     boollogin = true; 
    } , function(){ 
     $('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo', function(){ 
      $('#slidedownlogin').children().hide(); 
     }); 
     boollogin = false; 
     boolregister= false; 
    }); 
}); 

La page Je travaille sur est à http://www.premiersoftware.co.uk/index94.php . Le code complet est dans le fichier php pour le moment, donc vous pouvez le voir là aussi. Vous devriez avoir une idée de ce que j'essaie de faire en cliquant sur les deux liens (Register et Login) en haut à droite de la page. Ils sont supposés réinitialiser les variables boollogin ou boolregister, mais en inspectant ces deux variables dans firebug révèle qu'ils ne sont pas réinitialisés et ne changent pas. En conséquence, la page agit d'abord comme prévu, mais après un certain temps et quelques clics, cela devient vraiment bizarre. La validation de formulaire et d'autres choses n'ont pas encore été faites car j'essaie de trier l'animation en premier. J'espérais que quelqu'un ici serait en mesure de faire la lumière sur pourquoi les variables ne sont pas réinitialisées et de suggérer comment je pourrais corriger le code. S'il existe un autre moyen de créer le même type de fonctionnalité, je suis également ouvert à la suggestion.

Merci à l'avance

Dan

Answer 1

avez-vous essayé de faire quelque chose comme:

$('<a href="javascript:void(0);" id="register" onclick="toggleTheCorrectDiv(true)">Register</a>').appendTo('#support').css({'float':'right','margin-right':'10px'}); 
$('<a href="javascript:void(0);" id="login" onclick="toggleTheCorrectDiv(false)">Login</a>').appendTo('#support').css({'float':'right','margin-right':'10px'}); 

Puis dans votre JS,

function toggleTheCorrectDiv(toggleRegister){ 
    if (toggleRegister){ 
     //Show Register Content 
    }else{ 
     //Show Login Content 
    } 
} 

Answer 2

Je pense au lieu de fermer la div redescend puis l'ouvre à nouveau lorsque l'utilisateur bascule entre login et registe r, il peut être plus intuitif de simplement afficher le registre ou le formulaire de connexion correct dans la div ouverte.

Ce code peut vous aider malgré tout, mais il implémente ce que j'ai suggéré ci-dessus.

http://jsbin.com/etezo5

lien modifier afin que vous puissiez voir le code:

http://jsbin.com/etezo5/edit