mootools:클릭한 요소와 작동하도록 Ajax 콜백 만들기

Question

빨간색 링크가 여러 개 있고 클릭 이벤트를 추가하여 실행 시 링크의 HREF 속성을 AJAX 요청으로 서버에 보내고 성공하면 링크 색상이 변경되도록 한다고 가정해 보겠습니다. 녹색으로.나는 다음과 같은 것을 원합니다 :

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

어리석은 질문이라면 죄송합니다.제목을 합리적인 제목으로 수정해 주세요.

Answer 1

여기서 문제는 this 이벤트 핸들러 내부는 다음과 동일하지 않습니다. this 요청 클래스 내부.따라서 일반적으로 수행되는 작업은 참조를 다음으로 변경하는 것입니다. this 예를 들어 새 변수에 var self = this.

그 후에는 사용할 수 있습니다 self.setStyle('color', 'green');

그건 그렇고, 가장 좋은 제안은 녹색에 대한 클래스도 갖고 클릭할 때 전환하는 것입니다.

따라서 코드 제안은 다음과 같습니다.

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

CSS에서 다음과 같이 사용합니다.

.green {
    color: green;
}

예