mootools:machen Sie ajax-callbacks zu arbeiten, mit angeklicktes element

Question

Angenommen, ich habe eine Reihe von rot gefärbte links, und wollen, fügen Sie ein click-Ereignis auf Sie, so dass, wenn es feuert, sendet es das HREF-Attribut des link-to-server (wie eine AJAX-Anfrage), und bei Erfolg wird der link Farbe wird geändert werden, um grün.Ich möchte etwas wie:

$$('a.red').addEvent(
    "click",
    function () {
        new Request.JSON({
            url: 'script.php', 
            onSuccess: function(){
                [the link wich is clicked].setStyle('color', 'green');
                return false;
            }
        }).get("url="+[url of the link]);
    }
);

Sorry, wenn dumme Frage.bitte Bearbeiten Sie Titel auf einige sinnvolle ein.

Answer 1

Das problem ist hier, dass this innerhalb der event-handler ist nicht die gleiche wie this innerhalb der Anfrage-Klasse.Also, Was normalerweise getan wird, ändern den Verweis auf this in eine neue variable, z.B. var self = this.

Nach, dass, Sie verwenden können self.setStyle('color', 'green');

Durch die Art und Weise, einen Verbesserungsvorschlag, am besten wäre es auch eine Klasse für die grüne Farbe und schalten Sie Sie durch die Zeit, von der Sie auf.

Also hier ist ein code, der Vorschlag wäre:

$$('a.red').addEvent("click", function (event) {
    var self = this;
    event.stop();
    new Request.JSON({
        url: 'script.php',
        onSuccess: function () {
            self.removeClass('red').addClass('green');
            return false; // I added event.stop(), presume that is what you meant. Do this line can be removed
        }
    }).get("url=" + self.href);
});

und in der CSS so etwas wie:

.green {
    color: green;
}

Beispiel