Wie referenziere ich das aufrufende Dom-Element in einer Jquery-Ajax-Erfolgsfunktion?

Question

Ich versuche, die Klasse eines Elements zu ändern, wenn ein Ajax-Aufruf basierend auf diesem Element erfolgreich ist

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

Ich verstehe das Problem so, dass in der Erfolgsfunktion ce verweist auf die Ajax-Objektparameter, NICHT auf das aufrufende Dom-Element, wie es an anderen Stellen der Klickfunktion der Fall ist. Also, wie kann ich auf das aufrufende Dom-Element verweisen und Klassen überprüfen/hinzufügen/entfernen?

Answer 1

Sie können sie einfach in einer Variablen speichern. Beispiel:

$("#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 übergibt das Ziel des Ereignisses, zusammen mit einigen anderen Informationen über sie, um Ihre Handler-Funktion. Siehe http://docs.jquery.com/Events_%28Guide%29 für weitere Informationen zu diesem Thema.

In Ihrem Code würde es wie $(e.target) referenziert werden.

Answer 3

Ajax-Parameter besser einstellen: context: this . Beispiel:

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

Answer 4

Ich weiß, es ist alt, aber Sie können den Parameter 'e' der Klickfunktion verwenden.