jQuery AJAX请求，成功执行，但未应用于html

Question

实际上是这样的，但不是我想要的。

 $('#progress', this).show();
 $('#txt', this).hide();
 $.ajax({
     type: "POST",
     url: "./inviteAdminAddSample.php",
     data: {
         rev: rev,
         aid: aid,
         rating: rating
     },
     success: function(data) {
         $('#txt', this).html('Succesfully added!'); // ***
         $('#txt', this).show(); // ***
         $('#progress', this).hide(); // ***
     }
 });

这3行不应用，但如果我把它们放在成功之外(前面的请求，例如)，它工作。

这是怎么回事?

Answer 1

成功回调中的this没有指向您希望它指向的元素。

你可以这样做:

var element = this;
$('#progress', element).show();
$('#txt', element).hide();
$.ajax({
    type: "POST",
    url: "./inviteAdminAddSample.php",
    data: {
        rev: rev,
        aid: aid,
        rating: rating
    },
    success: function(data) {
        $('#txt', element).html('Succesfully added!'); // ***
        $('#txt', element).show(); // ***
        $('#progress', element).hide(); // ***
    }
});

但是如果您使用id属性，我不认为需要将第二个参数传递给$()函数。如果您的id值是唯一的——就像它们应该的那样——您应该能够使用:

$('#progress').show();
$('#txt').hide();
$.ajax({
    type: "POST",
    url: "./inviteAdminAddSample.php",
    data: {
        rev: rev,
        aid: aid,
        rating: rating
    },
    success: function(data) {
        $('#txt').html('Succesfully added!'); // ***
        $('#txt').show(); // ***
        $('#progress').hide(); // ***
    }
});

Answer 2

success回调中的"this"指的是它自己的"this"，而不是你想要的那个。试试这个:

var self = this;
$('#progress',self ).show();
$('#txt',self ).hide();
$.ajax({
    type: "POST",
    url: "./inviteAdminAddSample.php",
    data: {rev: rev, aid: aid, rating: rating},
    success: function(data) {
        $('#txt',self ).html('Succesfully added!'); // ***
        $('#txt',self ).show();                     // ***
        $('#progress',self ).hide();                // ***
    }
 });

这样，您首先保存对您想要定位的"This"的引用。你可以在你的代码中使用这个引用，它总是指向你想要的。