Jak odwołać się do wywołującego elementu dom w funkcji sukcesu ajax jquery?

Question

Próbuję zmodyfikować klasę elementu jeśli wywołanie ajax na podstawie tego elementu jest udany

<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> 

Moje zrozumienie tego problemu jest to, że w funkcji sukcesu to odniesienia parametrów obiektu ajax, NIE wywołujący element dom, tak jak ma to miejsce w innych miejscach funkcji kliknięcia. Jak więc odwołać się do wywołującego elementu dom i sprawdzić/dodać/usunąć klasy?

Answer 1

Możesz po prostu zapisać go w zmiennej. Przykład:

$("#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 przekazuje cel zdarzenia, wraz z kilkoma innymi informacjami na jego temat, do funkcji obsługi. Aby uzyskać więcej informacji na ten temat, patrz http://docs.jquery.com/Events_%28Guide%29.

W kodzie będzie on odnosił się podobnie do $ (e.target).

Answer 3

Wiem, że jest stara, ale możesz użyć parametru "e" z funkcji kliknięcia.

Answer 4

Lepiej ustawić parametr ajax: context: this. Przykład:

$.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)); 
    } 
});