DOM Events und Objekte

[Pryos.org]

Kurzfassung meines Problems:
Ich schreibe gerade an einem TabManager, welcher selbstständig nach Elementen einer bestimmten CSS-Klasse sucht und diese zu einer Art Register zusammenfasst.

Prinzipiell funktioniert meine Klasse auch, jedoch benötige ich in den neuen Register-Elementen ( in diesem Fall erstmal Divs ) einen onclick-Event, welcher meinem Objekt sagt, das dieses umschalten soll.

Bisher habe ich erstmal zum Testen der Funktion diese unschöne Lösung gewählt:

  
  
Element.onclick = function() {  
    // TabManager.prototyp.Select = function ( newTab ) {}  
    TabManager.Select(this.id.slice(TabManager.TabPrefix.length));  
}  
  

Welche Möglichkeiten habe ich?
a) ich rufe die Funktion irgendwie aus der Klasse (ohne Objekt) auf und übergebe entweder das Objekt oder die notwendigen Daten als Parameter (aber auch hier: wie?

b) Auf der Suche nach einer richtigen Lösung bin ich im Archiv auch auf diesen Postgestoßen, jedoch versteh ich ihn nicht. Liegt hier die Lösung?

c) ich muss im Konstruktor den Variablennamen mitgeben, dies jedoch ungern.

Ich hoffe von euch kann mir jemand weiterhelfen. Vermutlich brauch ich nur ein Denkanstoß

Mfg Pryos
PS: Vielen Dank fürs lesen und eventuelle Tipps oder Fragen :)

[Cheatah]

Hi,

Bisher habe ich erstmal zum Testen der Funktion diese unschöne Lösung gewählt:

die Lösung ist tatsächlich reichlich unschön: "Element" ist als Bezeichner schon in Gebrauch.

Welche Möglichkeiten habe ich?

Ändere den Namen Deiner Variable. Dann sieht's doch gut aus.

Cheatah

[Pryos.org]

Hi,

Hallo,

die Lösung ist tatsächlich reichlich unschön: "Element" ist als Bezeichner schon in Gebrauch.

Element war nur ein Beispiel in wirklichkeit heisst die Variable "cESel".

Ändere den Namen Deiner Variable. Dann sieht's doch gut aus.

Nein, da ich bei meiner aktuellen lösung vorgebe, wie das Objekt, aus welchem die Klasse erstellt wird heisst.

hier die komplette Klasse:

var TabManager = function(SelectorName, DontUseHash) {  
	this.currentTab = "";  
	this.Tabs = new Array();  
	this.useHash = (!DontUseHash);  
	this.TabPrefix = "tab_";  
	this.ContentPrefix = "";  
	  
	var	TAB_SPACE = document.getElementById(SelectorName);	  
	if (!TAB_SPACE) return false;  
	  
	var CList	= document.getElementsByClassName(SelectorName);  
	if (CList.length<=0) return false;  
	  
	for (var ci=0; ci < CList.length; ci++) {  
		// Infos holen  
		var cElem = CList[ci];  
		var cIden = cElem.id;  
		var cName = cElem.getAttribute("name");  
		// Tab erstellen  
		var cESel = document.createElement("div");  
		cESel.id = this.TabPrefix + cIden;  
		cESel.className = "nonsel";  
		cESel.appendChild(document.createTextNode(cName));  
		cESel.onclick = function() {  
			TabManager.Select(this.id.slice(TabManager.TabPrefix.length));  
		}  
		TAB_SPACE.appendChild(cESel);  
		// Werte überschreiben  
		cElem.id = this.ContentPrefix+cIden;  
		cElem.setAttribute("name", "");  
		this.Tabs.push(cIden);  
	}  
	  
	this.Select = function (newTab) {  
		if (!this.Tabs) return false;  
		  
		for (var i = 0; i < this.Tabs.length; i++) {  
			var Tab = this.Tabs[i];  
			if (Tab == newTab) {  
				document.showID(this.ContentPrefix + Tab);  
				document.setClass(this.TabPrefix + Tab, "sel");  
			} else {  
				document.hideID(this.ContentPrefix + Tab);  
				document.setClass(this.TabPrefix + Tab, "nonsel");  
			}  
		}  
		currentTab = newTab;  
		if (this.useHash) location.hash = newTab;  
	}  
	  
	if (this.useHash && location.hash.length > 1 && this.Tabs.getIndex(location.hash.slice(1))) {  
		this.Select(location.hash.slice(1));  
	} else this.Select(this.Tabs[0]);  
}

Cheatah

mfg Pryos

[Struppi]

  cESel.onclick = function() {  
  	TabManager.Select(this.id.slice(TabManager.TabPrefix.length));  
  }  

Das erscheint mir fehlerhaft. TabManager ist keine statische Klasse, sondern eine Konstruktorfunktion. also kannst du die Methode auch so nicht aufrufen. Der Parameter ist vermutlich so auch überflüssig. Allerdings ist mir nicht ganz klar, was du hier übergeben willst.

Um die TabManagerinstanz hier in dem Event zu erhalten, musst du eine Kopie erstellen, wie in dem ursprünglich von dir gefundenen Post gezeigt.

var _this = this;  
cESel.onclick = function() {  
_this.Select(this);  
}  

Wie gesagt, der Parameter ist mir nicht klar ich hab mal das angeklickte Objekt eingetragen.

Struppi.

[Pryos.org]

b) Auf der Suche nach einer richtigen Lösung bin ich im Archiv auch auf diesen Postgestoßen, jedoch versteh ich ihn nicht. Liegt hier die Lösung?

Ok, ich war wohl blind. Die Lösung ist wirklich einfach.
Anscheinend kann man mit den Variablen innerhalb der Funktion weiterarbeiten, wenn man diese in Events kopiert.

[Struppi]

Anscheinend kann man mit den Variablen innerhalb der Funktion weiterarbeiten, wenn man diese in Events kopiert.

Nein nicht in events, sondern in der Instanz. In dem Event hast du vollen Zugriff auf alle deine Variabeln in der Konstruktorfunktion. Mit diesem "Trick" ist es möglich in JS auch private Methoden/Attribute zu erzeugen, auch wenn es kein Schlüsselwort dafür gibt.

Struppi.