✔ Element identifizieren

S

spex

Hi,

ich bin dabei ein kleines Script zu schreiben das später Tabs erzeugen soll.

Ein Tab besteht aus einem "<li>" Element und beim Klicken auf dieses Element
soll eine Funktion aufgerufen werden die das Element auch eindeutig identifiziert
damit ich weis welches Tab gedrückt wurde.

Soweit zur Thorie. Nun die Praxis:

JavaScript:
Code: 
function $(id) {
	return document.getElementById(id);
}

function tab(id) {

	this.obj = $(id);
	
	var tabs = this.obj.getElementsByTagName('ul')[0].getElementsByTagName('li');
	
	for(i=0;i<tabs.length;i++) {
		tabs[i].onclick = function() {
			alert('tab'+i);
		}
	}
}

var tabset1;

window.onload = function() {
	tabset1 = new tab('tab');
};

Html:
HTML: 
<html>
	<head>	
		<title>Prototype: Dom Test</title>
		<link rel="STYLESHEET" type="text/css" href="css/style.css"></style>
		<script type="text/javascript" language="javascript" src="js/base.js"></script>
		<script type="text/javascript" language="javascript" src="js/tab.js"></script>
	</head>

	<body>
	
		<a href="javascript:tabset1.html();">Test</a>
		<div id="test">Hallo</div>

		<div id="tab">
			<ul>
				<li><a href="#tab1">Tab 1</a></li>
				<li><a href="#tab2">Tab 2</a></li>
				<li><a href="#tab3">Tab 3</a></li>
				<li><a href="#tab4">Tab 4</a></li>
			</ul>
			
			<div class="first">Tab Content 1</div>
			<div>Tab Content 2</div>
			<div>Tab Content 3</div>
			<div>Tab Content 4</div>
		</div>

	</body>
</html>

In der "for"-Schleife wird jedem Element ein onClick-Event zugewiesen.
Soweit ok, nur woher weis ich nun welcher Tab gedrückt wurde?
Ich versuche ja bereits in der Funktion im Alert den Index (i) zu übergeben,
nur wird der immerwieder überschrieben sodas er, egal welchen Tab ich drücke, immer "tab4" ausgiebt.

Hat jmd. eine Idee?

Gruß sp3x
 
Moin,

es gibt in JS das Schlüsselwort this, das liefert dir beim feuern eines Events einen Zeiger auf das aulösende Element...für deine Zwecke würde ich dessen Nutzung empfehlen :)
Code: 
for(i=0;i<tabs.length;i++) {
		tabs[i].onclick = function() {
			alert(this.firstChild.firstChild.data);
		}
	}

In dem Schnipsel liefert dir this also einen Zeiger auf das jeweils angeklickte LI-Element.
 
Dankeschön.

Ich dachte der "this" Aufruf funktioniert nur wenn er direkt aus einem HTML-Tag heraus aufgerufen wird.
Habs sogar schon in den Funktions-Header geschrieben weil ich gedacht hab das es als Parameter übergeben wird. Aber der einzige Parameter ist der EventTyp "MouseEvent" oder so Ähnlich.

Aber wenn man mal so drüber nachdenkt dann ist das logisch.
 
So hab das Script fertig.
Vielleicht sieht sichs mal jemand an und kann mir evtl. sagen was ich noch besser machen könnte.
Bin nich gerade ein Held was JavaScript angeht.
 

Anhänge

Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück