javascript - 尝试更改成功函数内 $(this) 的属性

Question

我正在尝试根据单击上一个图标的结果更改图标。

这是我的代码:

$(document).on('click','.switchButton', function(){
     $(this).attr('data-prefix', 'fas').attr('data-icon', 'spinner').addClass('fa-pulse');
     $.ajax({
        url: 'tasks/update_table.php',
        type: 'post',
        data: { "uid": $(this).attr('data-uid')},
        success: function(response) { 
            if(response == 1) {
                $(this).attr('data-prefix', 'far').attr('data-icon', 'check-square');
            } else {
                $(this).attr('data-prefix', 'fas').attr('data-icon', 'check-square');
            }
        }
    });
});

图标最初在页面上的位置是:

<i data-uid="<?=$task['uid'];?>" class="far fa-square fa-lg switchButton"></i>

当用户单击此图标时，Ajax 请求将发送到 PHP 脚本，该脚本将更新表中的 bool 变量，并返回 bool 值是否为真(0 或 1)的真值。

当最初单击图标时，图标会切换为旋转图标，这是由第一个完成的，就像提到$(this)一样，一旦请求到达成功函数，它应该改变根据给出的响应再次图标，但它不起作用。页面根本没有更新。我认为这是一个范围问题，但是阅读了有关此问题的各种文章并做了一些研究，我无法找到解决它的方法。我实际上不知道这是否是范围问题，这当然没有帮助。

如何在成功函数中更新这些图标？

Answer 1

$.ajax方法支持传递 context 属性，该属性将成为回调内 this 的值:

$.ajax({
    context: this,
    success: function(response) {
        // this === context here
    },
    ...
});