如何引用jquery ajax成功函數中的調用dom元素？

Question

我想修改類的元素，如果基於該元素的Ajax調用成功

<script type='text/javascript'> 
$("#a.toggle").click(function(e){ 
    $.ajax({ 
     url: '/changeItem.php', 
     dataType: 'json', 
     type: 'POST', 
     success: function(data,text){ 
      if(data.error=='') 
      { 
       if($(this).hasClass('class1')) 
       { 
        $(this).removeClass('class1'); 
        $(this).addClass('class2'); 
       } 
       else if($(this).hasClass('class2')) 
       { 
        $(this).removeClass('class2'); 
        $(this).addClass('class1'); 
       } 
      } 
      else(alert(data.error)); 
     } 
    }); 
    return false; 
}); 
</script> 
<a class="toggle class1" title='toggle-this'>Item</a> 

我對這個問題的理解是，在成功的功能這引用Ajax對象參數，不像它在click函數的其他地方那樣調用dom元素。那麼，我該如何引用調用dom元素並檢查/添加/刪除類？

Answer 1

您可以將它存儲在一個變量中。示例：

$("#a.toggle").click(function(e) 
{ 
    var target = $(this); 
    $.ajax({ 
     url: '/changeItem.php', 
     dataType: 'json', 
     type: 'POST', 
     success: function(data,text) 
     { 
     if(data.error=='') 
     { 
      if(target.hasClass('class1')) 
      { 
       target 
        .removeClass('class1') 
        .addClass('class2'); 
      } 
      else if(target.hasClass('class2')) 
      { 
       target 
        .removeClass('class2') 
        .addClass('class1'); 
      } 
     } 
     else(alert(data.error)); 
     }  
    }); 
    return false; 
}); 

Answer 2

jQuery將事件的目標以及關於它的一些其他信息傳遞給您的處理函數。有關詳細信息，請參閱http://docs.jquery.com/Events_%28Guide%29。

在你的代碼中，它會被引用像$（e.target）。

Answer 3

我知道這是舊的，但你可以使用點擊功能的'e'參數。

Answer 4

更好的設置ajax參數：context: this。示例：

$.ajax({ 
    url: '/changeItem.php', 
    dataType: 'json', 
    type: 'POST', 
    context: this, 
    success: function(data,text){ 
     if(data.error=='') 
     { 
      if($(this).hasClass('class1')) 
      { 
       $(this).removeClass('class1'); 
       $(this).addClass('class2'); 
      } 
      else if($(this).hasClass('class2')) 
      { 
       $(this).removeClass('class2'); 
       $(this).addClass('class1'); 
      } 
     } 
     else(alert(data.error)); 
    } 
});