ubuntuusers.de

via DuckDuckGo

HTML & JQuery: Auffinden eines entfernten Verwandten mit "this"!

Status: Gelöst | Ubuntu-Version: Ubuntu 10.04 (Lucid Lynx)
Antworten |

Arubeto

Anmeldungsdatum:
4. Dezember 2007

Beiträge: 384
Zitieren
12. Mai 2011 17:03

Hallo,

ich versuche, mit JQuery eine Zeile in einer HTML-Table ein- und ausblenden zu lassen. Folgendes Code-Fragment zeigt den html-Ausschnitt und entsprechenden, eingebetteten Javascript-Code:

...
<head>
...
<script type="text/javascript">
function hide_rows(){
	$(".hidden_row").hide(0);
}
function toggle_row(){
	$(this).parent().parent().next().slideToggle("slow");
}
</script>
...
</head>
<body onload="hide_rows()">
...
<table>
<tr><td><button onclick="toggle_row()" value="Details">Details</button></td></tr>
<tr class="hidden_row"><td>Ausgeblendeter Inhalt 1</td></tr>

<tr><td><button onclick="toggle_row()" value="Details">Details</button></td></tr>
<tr class="hidden_row"><td>Ausgeblendeter Inhalt 2</td></tr>

<tr><td><button onclick="toggle_row()" value="Details">Details</button></td></tr>
<tr class="hidden_row"><td>Ausgeblendeter Inhalt 3</td></tr>
</table>
...

Das ausblenden der Zeile beim Laden der Seite funktioniert, das Einblenden über den Button jedoch nicht. Benutze ich "this" falsch? Gibt es einen einfacheren Weg, an das erste Geschwisterelement des Großelternelementes zu kommen?

Vielen Dank im Voraus!

Arubeto

(Themenstarter)

Anmeldungsdatum:
4. Dezember 2007

Beiträge: 384
Zitieren
12. Mai 2011 22:42

Unter http://remysharp.com/2007/04/12/jquerys-this-demystified/ habe ich einen Artikel zu jQuerys "this" gefunden, der mir evtl. etwas mit meinem Problem zu tun haben scheint. Allerdings bin ich mir nicht sicher, was ich an meinem Code ändern muss, damit es läuft.

Laut der Erklärung im Blog wäre das bei mir benutzte "this" ein jQuery-Objekt, da ich es in einer von mir definierten Funktion nutze und nicht in einer Callback-Funktion, (die ich wiederum einer jQuery-Funktion übergeben würde), richtig? Und da mein "this" ein jQuery-Objekt ist, kann ich keine jQuery-Funktionen damit aufrufen, die ein DOM-Objekt verlangen (wie in meinem Fall ".parent()", oder?

Meine Frage: wie mache ich aus dem "jQuery-this" ein "DOM-this"?

Arubeto

(Themenstarter)

Anmeldungsdatum:
4. Dezember 2007

Beiträge: 384
Zitieren
12. Mai 2011 22:59

Hm, ok, ich glaube, ich habe es. Ich nutze nun nicht mehr den "onclick"-Event, sondern die jQuery-Funktion ".click", die mir eine anonyme Callback-Funktion ausführt, wenn ich ein Element anklicke (http://api.jquery.com/click/). Von dort aus kann ich "this" aufrufen, bekomme ein DOM-Element und kann mich wie geplant durch die Tabellen-Zellen und -Spalten erst hoch und dann wieder eine Ebene runterhangeln.

Es klappt, wenn ich folgenden Code einfüge:

...
<tr><td><button class="trigger" value="Details">Details</button></td></tr>
<tr class="hidden_row"><td>Ausgeblendeter Inhalt 1</td></tr>
...
<script type="text/javascript">
  $(".trigger").click( function () {
  $(this).parent().parent().next().slideToggle("slow");
  });
</script>
...

Allerdings animiert das ganze nicht schön flüssig, wie ich das gewohnt bin, sondern ruckelt erst und ist dann plötzlich weg. Irgendein Fehler beim Aufruf von slideToggle?

Antworten |