Klassenerweiterung eines Java-Script

[molily]

Hallo,

Ich würde das so lösen:

<script type="text/javascript" src="http://dean.edwards.name/base/forEach.js"></script>  
<script type="text/javascript">  
[code lang=javascript]function init () {  
 forEach(  
  document.getElementsByTagName("ul"),  
  function (ul_element) {  
   forEach(  
    ul_element.getElementsByTagName("button"),  
    function (button_element) {  
     button_element.correspondingList = ul_element;  
     button_element.onclick = activate;  
    }  
   );  
  }  
 );  
}  
window.onload = init;  
function activate () {  
 if (this.correspondingList.activeButton) {  
  this.correspondingList.activeButton.className = "";  
 }  
 this.className = "active";  
 this.correspondingList.activeButton = this;  
}

</script>
<style type="text/css">

button.active { color:red; }  
ul, li { list-style-type:none; margin-left:0; padding-left:0; }

</style>

<ul>
<li><button>Link 1</button></li>
<li><button>Link 2</button></li>
<li><button>Link 3</button></li>
</ul>

<ul>
<li><button>Link 1</button></li>
<li><button>Link 2</button></li>
<li><button>Link 3</button></li>
</ul>

<ul>
<li><button>Link 1</button></li>
<li><button>Link 2</button></li>
<li><button>Link 3</button></li>
</ul>[/code]

Erst einmal lage ich die JavaScript-Logik aus. Im HTML definiere ich lediglich drei Listen mit Buttons.

Beim fertigen Laden wird eine Funktion gestartet, die alle Listen des Dokuments durchläuft und darin alle Buttons. Jedem Button gibt sie einen onclick-Handler und speichert zudem eine Referenz auf die zugehörige Liste als Eigenschaft am button-Elementobjekt. (Man kann in JavaScript jedem Objekt Eigenschaften anhängen. So kann man bequem direkt am Element eine Referenz auf das ul-Elementobjekt speichern, die man in der Event-Handler-Funktion ebenso bequem benutzen kann.)

Um die Listen mit Elementknoten einfach zu durchlaufen, die document.getElementsByTagName zurückgibt, nutze ich eine externe Funktion namens forEach aus http://dean.edwards.name/base/forEach.js. Die sorgt einfach dafür, dass für jedes Element in der Liste die notierten anonymen Funktioen ausgeführt werden. Man kann aber auch einfach mit simplen verschachtelten for-Schleifen arbeiten, aber der Code wird dadurch schnell sehr lang und unübersichtlich. (Es gibt noch weitere Funktionssammlungen, die einem das Vergeben von Event-Handlern an bestimmte Elemente im Dokument noch besser vereinfachen, z.B. jQuery. Das aber nur am Rande.)

Beim Klicken auf einen Button startet die Funktion activate. Die greift über this auf das button-Elementobjekt zu, bei dem der click-Event passierte. Daran hängt ja die Eigenschaft correspondingList, welche auf das zugehörige ul-Elementobjekt verweist. Wenn also an diesem Objekt eine Eigenschaft activeButton existiert, dann setze deren Eigenschaft className.

Das ergibt Sinn, wenn man den Rest der Funktion activate betrachtet: Darin wird die Klasse auf aktice gesetzt und danach eine Eigenschaft namens activeButton am ul-Elementobjekt angelegt. Darin wird eine Referenz auf das gerade aktivierte button-Elementobjekt gespeichert. Am Anfang der Funktion wird also die Klasse dieses zuletzt aktivierten Buttons zurückgesetzt.

Mathias