なぜ、removeClass（）およびaddClass（）が機能しないのですか？

Question

私は正常に実行されるAJAX呼び出しを持っていますが、done()セクションに達すると、 "SUCCESS"というメッセージが表示されますが、ボタンのクラスは変更されません。

$(".btn").click(function() { 
    $.ajax({ 
     method: "POST", 
     url: $(this).data("action"), 
     data: { 
      aId: $(this).data("a-id"), 
      bId: $(this).data("b-id"), 
      cId: $(this).data("c-id") 
     } 
    }) 
    .done(function() { 
     console.log("SUCCESS"); 
     $(this).removeClass("btn-default"); 
     $(this).addClass("btn-success"); 
    }) 
    .fail(function (jqXHR, textStatus, errorThrown) { 
     alert("FAILURE"); 
     $(this).removeClass("btn-default").addClass("btn-danger"); 
    }); 
}); 

マイ推測はそれが私が行動する関数にボタンのIDを与えていないよという事実に関係するのではなく、「クラスを持っているクリックされたものに基づいて行動しなければならないことですbtn。 "このページには長いボタンのリストがあります。なぜなら、ページには同じIDが与えられているのでIDがないからです。私はIDに数字を付けることができると思いますが、私はそのようにしたくないです。また、値を取得するときに、$(this)が残りのAJAX関数で動作する理由についても説明しません。

Answer 1

$(this)は、右ではありませんthisです。要素をキャッシュしてみてください。

$(".btn").click(function() { 
    var $btn = $(this); 

    $.ajax({ 
     method: "POST", 
     url: $(this).data("action"), 
     data: { 
      aId: $(this).data("a-id"), 
      bId: $(this).data("b-id"), 
      cId: $(this).data("c-id") 
     } 
    }) 
    .done(function() { 
     console.log("SUCCESS"); 
     $btn.removeClass("btn-default"); 
     $btn.addClass("btn-success"); 
    }) 
    .fail(function (jqXHR, textStatus, errorThrown) { 
     alert("FAILURE"); 
     $btn.removeClass("btn-default").addClass("btn-danger"); 
    }); 
});