OOP-Verständnis: Objekt Eigenschaft hinzufügen

[Noeden]

Hallo,

ich bin nen OOP-Loser, der Beweis folgt. Habe mir gerade gedacht, dass ich einem Objekt doch schickerweise ein Attribut hinzufügen könnte, das wäre eine elegantere Lösung doch wie ich es versucht habe, funktionierte es nicht.

		$(".MenuButton").open = new Boolean;
		$(".MenuButton").open = false;

Hatte alert($(".MenuButton")); mal ausgeführt und da hat er mir gesagt, es sei ein Objekt. Wie weise ich dem jetzt eine Eigenschaft zu?

DAnke

 

[CPoly]

Was funktioniert denn daran nicht? Bzw. was erwartest du dir davon?

Bei mir funktioniert das ohne Probleme.

 

[Noeden]

Der Retter in Not Also das hier ist mein Script

	$(document).ready(function() {
		var Animation = new Boolean;
		Animation = false;
		$(".MenuButton").open = new Boolean;
		$(".MenuButton").open = false;
		alert($(".MenuButton").open);

		$(".MenuButton").click(function() {
			if(!Animation){
				Animation = true;
				if($(this).open){
					$(this).next().animate({width: "0px"}, 1000, function(){ $(this).open = false; Animation = false; });
				}else{
					$(this).next().animate({width: "820px"}, 1000, function(){ $(this).open = true; Animation = false; });
				}
			}
		});
	});

Hierbei gibt er mir beim Laden der Seite undefined aus. Dann war meine Idee wohl richtig, und ich habe woanders nen Fehler.

 

[CPoly]

Noch was vorweg: Du brauchst nicht ständig zuerst "new Boolean" auszuführen. Weise den Variablen einfach false/true zu. Das ist das tolle an nicht-typisierten Sprachen.


In diesen vier Zeilen, erzeugst du vier jQuery-Objekte (welche bel. viele [auch 0] HTML Element enthalten können).

$(".MenuButton").open = new Boolean;
$(".MenuButton").open = false;
alert($(".MenuButton").open); 

$(".MenuButton").click(function() {});

Innerhalb des Click handler hast du dann genau das geklickte HTML Element als "this" zur verfügung. Das hat aber mit den vorherigen jQuery Objekten nichts zu tun.


Für das was du vor hast, bietet jQuery eine nette Lösung. Du kannst jeden DOM Objekt Daten anhängen.

$(document).ready(function() {
	var Animation = false;
	var buttons = $(".MenuButton");
	
	//Allen HTML Elementen innerhalb des jQuery Objekts werden diese Daten angehängt
	buttons.data('open', false);
	
	buttons.click(function() {
		if(!Animation){
			Animation = true;
			
			if($(this).data('open')) {
				$(this).next().animate({width: "0px"}, 1000, function() {
					$(this).data('open', false);
					Animation = false;
				});
			} else {
				$(this).next().animate({width: "820px"}, 1000, function() {
					$(this).data('open', true);
					Animation = false;
				});
			}
		}
	});
});

Außerdem wäre auch ein gängiges Vorgehen, dass du das mit CSS-Klassen löst. Hat den vorteil, dass du deine Buttons auch je nach Zustand stylen kannst. Folgende Methoden sind dafür sinnvoll.

$(this).addClass('meineKlasse');
$(this).removeClass('meineKlasse');
$(this).toggleClass('meineKlasse');

$(this).is('.meineKlasse');
//oder
$(this).hasClass('meineKlasse');

 

[Noeden]

Gut, dann lass ich das mit dem new Boolean, war mir nicht 100% sicher und dachte, dass es schon nciht schaden wirde

Also erstellst Du gerade ein objekt buttons, welches auf die Elemente mit der Klasse .MenuButton verweist? Den Rest verstehe ich dann! Als hätte ich das mit dem .open einfach in der Schleife bei this machen müssen, damit ich die Instanz anspreche und nicht ein abstraktes Objekt?

Und das mit dem toggleClass. Dann wird das aber nicht animiert oder? Sondern verändert nur schwupps seine Breite?

Danke
PS: der andere Vorteil ist, dass ich so die Breite dynamisch festlegen kann, damit ich, wenn ich neue Menüeintrage hinzufüge, dennoch nichts überstehen habe.


DANKE DANKE DANKE

Edit: Ich hab es doch nicht gerafft, denn das hier funktioniert auch nicht: ... Grummel:

$(".MenuButton").click(function() {
if(!Animation){
Animation = true;
$(this).geklickt= true;
alert($(this).geklickt);
if($(this).open){
$(this).next().animate({width: "0px"}, 1000, function(){ $(this).open = false; Animation = false; });
}else{
$(this).next().animate({width: "820px"}, 1000, function(){ $(this).open = true; Animation = false; });
}
}
});


Muss ich mir OOP nochmal anschauen. Nen Tipp wo es besonders klug für besonders resistente erklärt ist

 

[CPoly]

Das hier sind zwei unterschiedliche Objekte!

$(this).geklickt= true;
alert($(this).geklickt);

Das "this" ist zwar das gleiche Objekt, aber du erzeugst in beiden Zeilen jeweils ein neues jQuery Objekt, welche lediglich den gleichen Inhalt haben aber eben unterschiedliche Objekte sind!

So müsste es wiederrum funktionieren:

$(".MenuButton").click(function() {
    if(!Animation){
        Animation = true;
        this.geklickt= true;
        alert(this.geklickt);
        if(this.open){
             $(this).next().animate({width: "0px"}, 1000, function(){ this.open = false; Animation = false; });
        }else{
            $(this).next().animate({width: "820px"}, 1000, function(){ this.open = true; Animation = false;});
        }
    }
});

Denn es macht einen Unterschied, ob du überall das gleiche HTML Element (DOM Element) referenzierst, oder ein jQuery Objekt mit dem gleichen Inhalt.