How do I reference the calling dom element in a jquery ajax success function?

Question

I'm trying to modify the class of an element if an ajax call based on that element is successful

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

My understanding of the problem is that in the success function this references the ajax object parameters, NOT the calling dom element like it does within other places of the click function. So, how do I reference the calling dom element and check / add / remove classes?

Answer 1

You can just store it in a variable. Example:

$("#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 passes the target of the event, along with some other information about it, to your handler function. See http://docs.jquery.com/Events_%28Guide%29 for more info about this.

In your code, it'd be referenced like $(e.target).

Answer 3

Better set ajax parameter : context: this . Example:

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

我知道它已经很旧了，但是您可以使用click函数中的'e'参数。