Jquery $（此）坚持到。获取呼叫成功

我试图引用$this，但jquery找不到它。简单代码：

$(".testBox").click(function(){
    $(this).addClass("backRed");
    $.get("/data/TESTer/?tickle=yes", function(data) {
        $(this).addClass("backGreen");
        alert("Data Loaded: " + data);
    });
});

---

在这个场景中，.testBox将使类返回红色，但不会使类返回绿色，可能是因为$this现在引用了$get中的某些内容。如何在$.get参数中引用单击的$this？

简单的方法是创建一个如下的闭包：

    $(".testBox").click(function(){
        var $this = $(this);
        $this.addClass("backRed");
        $.get("/data/TESTer/?tickle=yes", function(data) {
            $this.addClass("backGreen");
            alert("Data Loaded: " + data);
        });
    });

$(".testBox").click(function(){
    var me = $(this);
    me.addClass("backRed");
    $.get("/data/TESTer/?tickle=yes", function(data) {
        me.addClass("backGreen");
        alert("Data Loaded: " + data);
    });
});

它的作用是：

创建存储$this的局部范围变量。 在内部函数中使用该变量

---

发生的情况是，它将创建一个闭包，一个引用外部父级并可以使用该父级变量的函数。

最简单的方法可能是：

$(".testBox").click(function(){
    var self = $(this);
    self.addClass("backRed");
    $.get("/data/TESTer/?tickle=yes", function(data) {
        self.addClass("backGreen");
        alert("Data Loaded: " + data);
    });
});

将选择器缓存到$this中

从中派生$.get的$.ajax方法有一个上下文参数，专门用于控制成功处理程序中该参数的值

因此，您可以使用该选项：

$(".testBox").click(function(){
    $(this).addClass("backRed");
    $.ajax({
        url: "/data/TESTer/?tickle=yes",
        context: this, 
        success: function(data) {
            $(this).addClass("backGreen");
            alert("Data Loaded: " + data);
        }
    });
});

---

这就是为什么fat arrow=>如此方便的原因。他们还很好地描述了正在发生的事情。^^^^^十只独角兽刚刚死去，coffeescript从来都不方便，它只是添加了一些奇怪的层次，让javascript看起来更奇怪。很酷，但接受@Andrei的回答，因为他已经尽了更大的努力来解释为什么它会这样工作。

$(".testBox").click(function(){
    $(this).addClass("backRed");
    $.ajax({
        url: "/data/TESTer/?tickle=yes",
        context: this, 
        success: function(data) {
            $(this).addClass("backGreen");
            alert("Data Loaded: " + data);
        }
    });
});