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>

当用户单击此图标时，会向php脚本发送ajax请求，该脚本将更新表中的布尔变量，如果布尔值为true（0或1），则返回truthy值。

当最初点击图标时，图标会切换到一个微调器图标，这个图标由第一个完成，如提到$(this)，一旦请求到达成功功能，它应该再次更改图标给出的回应，但它不起作用。页面根本没有更新。我认为这是一个范围问题，但阅读有关此问题的各种文章并进行一些研究我还没有找到解决方法。我当然不知道这是否是一个范围问题，这当然没有帮助。

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

Answer 1

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

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

Answer 2

在$ .ajax调用之前，将this上下文保存为const that = this。然后在success()内使用that代替this。

$(document).on('click','.switchButton', function(){
 $(this).attr('data-prefix', 'fas').attr('data-icon', 'spinner').addClass('fa-pulse');

 const that = this; // save 

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

Answer 3

在ajax响应之后，$（this）将无法获得。您需要创建变量并存储当前的elm。然后在ajax调用之后根据需要进行调整。

试图在成功函数内更改$（this）的属性

3 个答案: