Schlüsselwort "this"

[SchlafenDer]

Hallo,

ich bin gerade an einem Punkt, an dem ich nicht weiterkomme.
Für unsere kleine Community (12 Leute) programmiere ich gerade in unserem Board eine Bewertungfunktion ein. Jeder Beitrag kann mit "like" oder "dislike" bewertet werden. Ganz ähnlich der Bewertungs-Funktion in Facebook und anderen sozialen Netzwerken.
Wenn der momentan eingeloggte User noch keine Bewertung zu einem Beitrag abgegeben hat, werden beide Buttons angezeigt.
Klickt der User nun auf einen Button, wird seine Bewertung im Hintergrund abgespeichert (Ajax mit JQuery) und es soll - hier liegt mein Problem - der eben geklickte Button ausgeblendet werden. So soll nach einer Bewertung nur noch die Möglichkeit bestehen, die Bewertung von "Like" zu "Dislike" abzuändern, und umgekehrt.

Wie schon gesagt, dieses Ausblenden bereitet mir momentan Probleme.

Die Buttons sehen wie folgt aus:

  
<span>  
<a href="javascript:vote(<user_id>, <post_id>, 'like', this)">  
 <img class="like_btn" src="img/like_50.png" alt="">  
</a>  
<a href="javascript:vote(<user_id>, <post_id>, 'dislike', this)">  
 <img class="dislike_btn" src="img/dislike_50.png" alt="">  
</a>  
</span>  

Das <span> ist dem Aufbau des Boards geschuldet.

Die Parameter werden alle erfolgreich in die Funktion "vote" übertragen, und diese kann ich auch mit JQuery wunderbar an eine PHP-Datei schicken, die die Bewertung in die Datenbank schreibt.

Mit JQuery sollte es auch kein Problem sein, über den vierten Parameter "this", das Kindelement (hier das <img>) auszublenden.
Aber "this" verweist in der Funktion "vote" immer auf das HTML-Window-Objekt.
In vielen Artikeln, die ich gegoogelt habe, steht, dass nur im onClick-Attribut "this" auf das eigentliche Eltern-Element verweist. Auch das habe ich versucht, aber auch hier versteckte sich hinter "this" das HTML-Window-Objekt.

Wie müsste ich richtigerweise an das Problem herangehen? Ich vermute, dass es über diesen Weg nicht funktionieren wird.

Freundliche Grüße
SchlafenDer

[Cheatah]

Hi,

<a href="javascript:vote(<user_id>, <post_id>, 'like', this)">

wenn Du nichts verlinkst, verwende keinen Link.

Aber "this" verweist in der Funktion "vote" immer auf das HTML-Window-Objekt.

Natürlich, durch den Aufruf einer (javascript-)URL hast Du zunächst einmal alles zur potenziellen Vernichtung freigegeben, was ein anderer Kontext sein könnte. In einem Event-Handler passiert das nicht.

In vielen Artikeln, die ich gegoogelt habe, steht, dass nur im onClick-Attribut "this" auf das eigentliche Eltern-Element verweist.

In jedem Event-Handler, nicht nur onclick (welches in HTML durchgängig klein geschrieben werden darf und in XHTML muss), und nicht auf das Eltern- sondern das aktuelle Element.

Auch das habe ich versucht, aber auch hier versteckte sich hinter "this" das HTML-Window-Objekt.

In der Funktion ja, im Aufruf und damit einem empfangenen Funktionsargument nicht.

Cheatah

[molily]

<a href="javascript:vote(<user_id>, <post_id>, 'like', this)">

Aber "this" verweist in der Funktion "vote" immer auf das HTML-Window-Objekt.

Wenn du Code mit javascript: notierst, wird er immer im globalen Kontext ausgeführt. Sprich, this zeigt auf window.

In vielen Artikeln, die ich gegoogelt habe, steht, dass nur im onClick-Attribut "this" auf das eigentliche Eltern-Element verweist. Auch das habe ich versucht, aber auch hier versteckte sich hinter "this" das HTML-Window-Objekt.

Nein. Du kannst hier durchaus onclick verwenden, solange du this an die aufgerufene Funktion übergibst:

<img ... onclick="[code lang=javascript]vote(<user_id>, <post_id>, 'like', this)">[/code]

In der Funktion nimmst du das Objekt als Parameter entgegen und nutzt diesen:

function vote (user_id, post_id, action, button) {  
   alert(button); // Wird das img-Element ausgeben  
}

Vermutlich hast du in dieser Funktion wieder direkt this verwendet, anstatt die übergebene Variable zu nutzen. Klar, auch vote wird in dem Fall im globalen Kontext ausgeführt.

this zeigt in Event-Handlern auf das Element, bei dem das Ereignis überwacht wurde. Dieses this »vererbt« sich aber nicht beim Aufruf anderer Funktionen.

<element onevent="alert(this)">

Das geht noch und gibt das Element aus. Weil dieses alert() direkt in der Event-Handler-Funktion steht, die durch das onclick-Attribut erzeugt wurde.

function test () { alert(this); }
<element onevent="test()">

Das hingegen würde window ausgeben.

Siehe
Bedeutung von this
Darüber hinaus
Traditionelles Event-Handling und Verarbeitendes Element und Zielelement.

Grüße,
Mathias

[zaphod1984]

Nachdem du jQuery verwendet wäre doch die unobstrusive Variante elganter und einfacher:

  
<img class="like_btn" src="img/like_50.png" alt="" rel="<user_id>_<post_id>">  
  
<script>  
$(document).ready( function() {  
  $('.like_btn').click( function() {  
    var user_post = $(this).attr('rel'); //<-- this verweist hier tatsächlich auf das img  
    ...  
    $.get(...);  
  } );  
} );  
</script>