beim 1. Klick hochfahren, wenn es oben ist und man klickt runterfahren

[NE4Y]

Hey,

ich habe eine ziemliche Anfängerfrage in jQuery.

Ich habe folgenden Code

$(document).ready(function() {
    $("#login")
               .click(function (event) {
                   $(this).animate({
                       marginTop: '-=50'
                   }, 200 )     
                           .removeAttr('id', 'login')
                        .attr('id', 'login_active')
                        
               });
                          
                
    

                
                
             
    $("#login_active")
                .click(function (event) {
                    $(this).animate({
                     marginTop: '+=50'
                    }, 200)
                    
                    alert('hi');
                });
               
              
});

Was will ich damit bezwecken ?

Das Div login soll beim Klick 50 Pixel hochfahren (klappt), dann soll die id geändert werden in login_active ( klappt eig auch noch ) . So wenn man jetzt wieder klickt, sollte ja nur $("#login_active") gelten, nur fährt er dann immer noch hoch, und nicht runter wie es ja eigentlich sien sollte.

Ich hoffe ihr könnt mir meinen Fehler verraten.

MFG

#EDIT:

habs jetzt hinbekommen

//Loginbox 

	var status = false;
$(document).ready(function() {

	$("#login")
	
			   .click(function (event) {
				 if(status == false) {
				   
				   $(this).animate({
					   marginTop: '-=50'
				   }, 200 ) 
				   status = true;
				  
				   
				 }
				 else {
					   $(this).animate({
					   marginTop: '+=50'
				   }, 200 ) 
				   status = false;
			   }

				 
				   		
						
			   });
});

Ist das so ok ?

 

[Gilles]

Ich will dir mal erklären wieso deine erste Variante nicht funktioniert und wie du deine zweite verbessern kannst :)

Bei der ersten Variante wartet jQuery bis das Dokument geladen wurde und macht dann folgendes:

- Suche nach einem Element mit der ID login und setze einen click-Handler auf ihn. -> ein Element gefunden!
- Suche nach einem Element mit der ID login_active und setze einen click-Handler auf ihn. -> Kein Element gefunden!

Nun hat genau nur das eine Element einen click-Handler. Dabei ist es egal ob du die id im nachhinein veränderst. jQuery wird auch nicht mehr nach login_active suchen. Wenn du so etwas willst gibt es die Methode delegate (.delegate() – jQuery API)
Aber dann hätte dein Element 2 Handler. Dann würde es hoch und runterfahren

Nun zu deiner neuen Variante. Diese ist auf jeden Fall besser.
Ich würde jedoch nicht mit der öffentlichen Variable status arbeiten sondern die Methode data von jQuery benutzen. (.data() – jQuery API)
Mit dieser Methode kann man Daten einem Element zuweisen, die nur für JS verwendet werden und im Html nicht sichtbar sind.
dies funktioniert so:

  $("#login").data("status", "ausgeklappt");
  alert($("#login").data("status")); // Ausgabe ist: ausgeklappt

Im Event-Handler selber arbeitest du dann dementsprechend mit

$(this).data("status")

so kannst du ohne bedenken die gleichen Methoden für jegliche Elemente einsetzen ohne globale Variablen zu belegen :)

 

[struppi]

Wobei die globale Variabel 'status' auch in der ready Funktion deklariert werden könnte.