JavaScript jQuery removeClass Problem

[NoXPhasma]

Guten Morgen,

ich hoffe mir kann jemand helfen, ich lasse mit jQuery eine Animation durchlaufen und am ende die entsprechende Class entfernen und durch eine andere ersetzen, damit die Funktion kein 2. mal ausgeführt werden kann. Leider juckt das jQuery nicht, die Class wird entfernt und ersetzt, aber die Funktion wird bei erneutem click wieder abgefeuert.

Mein Code:

$().ready(function(){
	$(".activecontent").click(function () {
		$(this).find(".number").animate({height: "50px",backgroundColor: '#eee'}, 500, function() {});
		$(this).find("textarea").animate({height: "40px",backgroundColor: '#eee'}, 500, function() {});
		$(this).removeClass("activecontent").addClass("content");
	});
	$(".content").click(function () {
		$(this).find(".number").animate({height: "120px",backgroundColor: '#aaa'}, 500, function() {});
		$(this).find("textarea").animate({height: "110px",backgroundColor: '#aaa'}, 500, function() {});
		$(this).removeClass("content").addClass("activecontent");
	});
});

*edit*
Das sind natürlich 2 Funktionen
Die erste Funktion ist .content, das ist auch die einzige die immer wieder abgefeuert wird, .activecontent wird nicht mal berücksichtigt.

 

[2fastHunter]

Es müsste ertsmal $(document).ready() heissen.

 

[Arthur1901]

und warum nimmst du nicht gleich eine toogle funktion her im grunde machst du hier nix anderes

 

[NoXPhasma]

Es müsste ertsmal $(document).ready() heissen.

Ok

und warum nimmst du nicht gleich eine toogle funktion her im grunde machst du hier nix anderes

Danke, werde es damit versuchen.

 

[ManOki]

(ich vemute mal) das ganze liegt an der architektur...

die click funktion wird für alle elemente mit der klasse einmal registiert (und nicht für die klasse selbst). wenn du die klasse entfernst, ist immernoch die registrierte click funktion da. einfache alternative: 3 klassen, eine für click, die anderen 2 wie bisher als erkennung, welcher zustand. die erste bleibt dauerhaft, wie der click, die anderen beiden können wechseln.

allerdings, wenn du wirklich toggle willst, dann nimm doch das von jquery.

 

[2fastHunter]

Jo ManOi. Das sowas dachte ich mir dann auch.

 

[NoXPhasma]

In meinem Fall möchte ich eine Tabelle mit jQuery so verändern, das einzelne TR Elemente vergrößert/verkleinert werden können. Mit Toggle habe ich nicht genau das hin bekommen was ich wollte und habe es nun umgeschrieben.

$(document).ready(function(){

	$(".number").click(function () {
		var height = $(this).css("height");
		var currentId = $(this).attr('id');
		if (height == '48px') {
			$("#"+currentId).animate({height: "120px",backgroundColor: "#aaaaaa"}, 500, function() {});
			$("#t"+currentId).animate({height: "110px",backgroundColor: "#aaaaaa"}, 500, function() {});
			$(this).css("background-color","yellow");
		}
		else {
			$("#"+currentId).animate({height: "50px",backgroundColor: "#eeeeee"}, 500, function() {});
			$("#t"+currentId).animate({height: "40px",backgroundColor: "#eeeeee"}, 500, function() {});
			$(this).css("background-color","");
		}
	});
});

So funktioniert es wunderbar, auch wenn es nicht die eleganteste Lösung ist.

 

[cx01]

Um die Lösung deines Originalposts umzusetzen, musst du nicht click() sondern live() benutzen.

Ich würde es aber eher so wie in deinem letzten Post machen. Allerdings würde ich nicht die Höhe prüfen, sondern ein Attribut setzen, das angibt, ob der Content active ist oder nicht. Also so in der Art:

$(document).ready(function(){

    $(".number").click(function () {
        var currentId = $(this).attr('id');
        if ($(this).attr("active") == undefined) {
            $("#"+currentId).animate({height: "120px",backgroundColor: "#aaaaaa"}, 500, function() {});
            $("#t"+currentId).animate({height: "110px",backgroundColor: "#aaaaaa"}, 500, function() {});
            $(this).css("background-color","yellow");
            $(this).attr("active", true);
        }
        else {
            $("#"+currentId).animate({height: "50px",backgroundColor: "#eeeeee"}, 500, function() {});
            $("#t"+currentId).animate({height: "40px",backgroundColor: "#eeeeee"}, 500, function() {});
            $(this).css("background-color","");
            $(this).removeAttr("active");
        }
    });
});

 

[NoXPhasma]

Wunderbar, vielen Dank