Question

以下是用户点击关注按钮时的代码：

$('.follow_btn').click(function() {
    $(this).html('<img src = "../assets/style_images/loading.gif">');
    var userId = $(this).attr('id');
    $.post('../assets/scripts/ajax_follow_parse.php', {
        userId: userId
    }, function(data) {
        $(this).html(data);
    });
});

很高兴用第2行所示的加载gif替换它。但是当它返回数据并将其替换为第4行返回的数据时。

我该如何解决这个问题？

Answer 1

将$(this)分配给$.post()以外的变量：

var $this = $(this);

然后，不使用$(this)添加数据，而是使用我们刚创建的变量：

$this.html(data);

再次查看您的代码，您也可以这样做：

$("#" + userId).html(data);

由于您已经拥有元素的id。

Answer 2

在$.post内，this不再是您的元素。您需要在$.post之前将其保存到变量。

$('.follow_btn').click(function () {
    var $this = $(this); // Save this, so it can be used inside $.post
    $this.html('<img src = "../assets/style_images/loading.gif">');
    var userId = $this.attr('id');
    $.post('../assets/scripts/ajax_follow_parse.php', { userId: userId }, function(data) {
        $this.html(data);
    });
});

Answer 3

$(this)在$.post范围内不在上下文中。您需要将其缓存到变量中并在其中重复使用。

$('.follow_btn').click(function () {
    $this = $(this);
    $this.html('<img src = "../assets/style_images/loading.gif">');
    var userId = $this.attr('id');
    $.post('../assets/scripts/ajax_follow_parse.php', { userId: userId }, function(data) {
        $this.html(data); //$this not $(this)
    });
});

jQuery $（this）$ .post（）的问题

3 个答案: