mootools:faça retornos de chamada ajax para trabalhar com o elemento clicado

Question

Suponha que eu tenha vários links vermelhos e queira adicionar um evento de clique a eles de forma que, quando disparado, ele envie o atributo HREF do link para o servidor (como uma solicitação AJAX) e, em caso de sucesso, a cor do link será alterada para verde.Eu quero algo como:

$$('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]);
    }
);

Desculpe se a pergunta é boba.por favor edite o título para algum sensato.

Answer 1

O problema aqui é que this dentro do manipulador de eventos não é o mesmo que this dentro da classe de solicitação.Então, o que geralmente é feito é mudar a referência para this em uma nova variável, por exemplo var self = this.

Depois disso você pode usar self.setStyle('color', 'green');

Aliás, uma sugestão, o melhor seria ter também uma classe para a cor verde e trocá-las na hora do clique.

Então aqui está uma sugestão de código que seria:

$$('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);
});

e usando no CSS algo como:

.green {
    color: green;
}

Exemplo