jquery + ajax替換類

Question

我試圖用ajax替換button類，我做錯了什麼？

我的按鈕：

<input type="button" class="btn btn-default btn-sm addLike" name="{{ answer.pk }}" value="Like" ></input> 

我的JS：

$('.addLike').click(function(){ 

    $.ajax({ 
     type: "POST", 
     url: "{% url 'add_like' %}", 
     data: {'answer_pk': $(this).attr('name'), 
       'csrfmiddlewaretoken': '{{ csrf_token }}'}, 
     dataType: 'json', 
     success: function(response){ 
      alert(response.message); 
      if ($(this).hasClass('btn-default')) { 
       $(this).removeClass('btn-default').addClass('btn-success'); 
      } 
      else if ($(this).hasClass('btn-success')) { 
       $(this).removeClass('btn-success').addClass('btn-default'); 
       } 

      } 
    }); 
}) 

消息，它只是從我的Django的看法功能測試警報消息。只有替換元素存在問題

Answer 1

在回調中，$(this)指的是Ajax調用的jqXHR對象，而不是事件處理程序綁定到的元素。

嘗試這樣做。

$('.addLike').click(function() { 

    var element = this; // adding the current object in a variable 

    $.ajax({ 
     type: "POST", 
     url: "{% url 'add_like' %}", 
     data: { 
      'answer_pk': $(element).attr('name'), 
      'csrfmiddlewaretoken': '{{ csrf_token }}' 
     }, 
     dataType: 'json', 
     success: function(response) { 
      alert(response.message); 
      if ($(element).hasClass('btn-default')) { 
       $(element).removeClass('btn-default').addClass('btn-success'); 
      } else if ($(element).hasClass('btn-success')) { 
       $(element).removeClass('btn-success').addClass('btn-default'); 
      } 
     } 
    }); 
}); 

希望它有幫助。

Answer 2

一個簡單的toggleClass可以完成這個工作，而不需要檢查單個類並添加和刪除它們。

$("input").click(function() 
{ 
    $(this).toggleClass('btn-default btn-success'); 
    alert($(this).attr("class")); 
}); 

http://jsfiddle.net/vwLfxdya/