Question

我正在尝试引用$(this)，但jquery无法找到它。简单的代码：

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

在这种情况下，.testBox将获得课程backRed，但不会获得课程backGreen，可能是因为$(this)现在正在引用$.get中的某些内容1}}。如何在$(this)参数中引用所点击的$.get？

Answer 1

简单的方法是创建一个这样的闭包：

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

这是做什么的：

创建一个存储$(this)。
在内部函数中使用该变量

它会创建一个闭包，这是一个引用外部父项的函数，可以使用该父项的变量。

Answer 2

最简单的方法可能就是这样做：

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

Answer 3

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

Answer 4

将选择器缓存到$this

$(".testBox").click(function(){

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

Answer 5

$.ajax()方法（从中派生$.get()）有一个context参数，专门用于控制成功处理程序中this的值。

所以，您可以使用该选项：

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

$（this）坚持进入.get呼叫成功

5 个答案: