爲什麼不能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"); 
    }); 
}); 

我猜測是，它與事實，我不會放棄的功能按鈕的標識作用，但對任何被點擊有類「行爲做BTN「。這個來源的頁面有一長串按鈕，這就是爲什麼他們沒有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"); 
    }); 
});