mootools und toggle visibility auf mehrere Elemente

T

TraphiX

Erfahrenes Mitglied
Hallo =)

ich stehe hier vor einer kleinen "herausforderung ;-)".

Folgendes: Ich versuche gerade eine elegante möglichkeit zu finden, duch das Klicken einer Checkbox in einer td das nebenstehende Element zu beeinflussen, welches sich ebenfalls in einer td befindet =)

Meine Lösung funktioniert, ist aber nicht gerade sexy.. =/

Ich möchte, dass die nebenstehende td an opacity verliert. Jetzt möchte ich aber nicht für jede Checkbox und die dazugehörige td eine eigene JS Anweisung schreiben sondern einfach lazy eine class vergeben, die dann togglt =) Ich habe jetzt angefangen das ganz mit Hilfe von Mootools zu machen.

Nun möchte ich meine "Herausforderung" mit euch teilen. Tut mir leid... ;-)


Vielen Dank schoneinmal für die geistigen Anstrengungen.

VG =)
 
Hi,

du kannst mit der Methode getParent auf den Elternknoten (TD) der Checkbox zugreifen. Mittels getNext kann der Zugriff auf das nächste Element der gleichen Ebene erfolgen. Nun können mit setStyles die gewünschten CSS-Eigenschaften gesetzt werden.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="mootools-core.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
function toggleIt(objThis){
  $(objThis).getParent().getNext().setStyles({
    opacity: ((objThis.checked)? 0.5 : 1)
  });
}
 //-->
</script>
</head>
<body>
<table >
<tr>
 <td><input type="checkbox" name="cb_01" onclick="toggleIt(this);"></td>
 <td>Inhalt 1</td>
</tr>
<tr>
 <td><input type="checkbox" name="cb_02" onclick="toggleIt(this);"></td>
 <td>Inhalt 2</td>
</tr>
<tr>
 <td><input type="checkbox" name="cb_03" onclick="toggleIt(this);"></td>
 <td>Inhalt 3</td>
</tr>
</table>
</body>
</html>

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück