Question

我想对这个功能提出一些批评。基本上在函数内部有一个ajax调用，它看起来不像你可以在ajax范围内进行$（this）类型处理，所以我想在ajax成功完成后立即执行并直接更改DOM。

这是个好主意吗？

$('.lock').click(function() {
    ID = $(this).closest('tr').find('a').attr('href').match(/id=(.*)/);

    check = $(this).attr('class');

    if (check.match('fa-lock')) {
        value = 1;
    } else {
        value = 0;
    }

    $.ajax({
        type: 'POST',
        url: '/assets/php/userStatus.php',
        data: 'status='+value+'&ID='+ID[1],
        success: function(data) {

        },
        error: function(data){
            alert(data);
            location.reload();
        }
    ); //END OF AJAX

    if (value == 1) {
        $(this).attr('class', 'fa fa-unlock fa-lg lock');
        $(this).parent().prev().children('i').attr('class', 'fa fa-check fa-lg');
        $(this).parent().prev().children('i').attr('style', 'color: green;');

    } else {
        $(this).attr('class', 'fa fa-lock fa-lg lock');
        $(this).parent().prev().children('i').attr('class', 'fa fa-times fa-lg');
        $(this).parent().prev().children('i').attr('style', 'color: red;');

        // class="fa fa-times fa-lg" style="color: red;"
    }

}）;

Answer 1

您正在尝试使用尚未收到的数据....所以很遗憾，整个方法都存在缺陷。

您可以在this之前将$.ajax缓存在变量中，并在成功回调中使用该变量。

概要：

$('.lock').click(function(){
      var $lock = $(this);// cache $(this);
      $.ajax({
          .......

           success:function(data){
                 // now have element inside success
                 $lock.doSomething();

           }

      });
});

ajax调用后改变前端结果

1 个答案: