用Ajax替换锚

I am trying to activate/deactivate user by clicking on anchor. The list of users is generated dynamically from the loop. Following is one example of anchor tag.

<a href="http://www.example.com/users/deactivate/44" class="btn btn-success" title="Deactivate">Activated</a>

The ajax call/database updates/response are working fine. What I want is to change the above anchor appropriately with updated href, class, title and text on the success. For an example it should now change to

<a href="http://www.example.com/users/activate/44" class="btn btn-danger" title="Activate">Inactive</a>

I have the following jquery code:

$(".btn").click(function(event){
    event.preventDefault();
    var urlSplit=$(this).attr("href").split("/");
    var userid = urlSplit[urlSplit.length-1];
    var status = urlSplit[urlSplit.length-2];
    var $self = $(this); 

    if(status === 'activate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'activated'){
                //Edit added code
                $self.text("Activated");
                $self.attr('href', "http://www.example.com/users/deactivate/"+userid);
                $self.attr('class', "btn btn-success");
                $self.attr('title', "Deactivate");
            }
        });

    }

    if(status === 'deactivate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'deactivated'){
                //Edit added code
                $self.text("Inactive");
                $self.attr('href', "http://www.example.com/users/activate/"+userid);
                $self.attr('class', "btn btn-danger");
                $self.attr('title', "Activate");
            }
        });

    }

});

EDIT:

I have added the code inside the success response. Though it seems to work fine it does not quite look the right way for me or is it? I have to move the cursor away and focus in again to see the change in href and title.

Seems pretty straight-forward, unless I have misread the problem. Use string replace and attr to change the attributes. Use removeClass and addClass to change the classes. $self already points at the specific link that caused the event.

$(".btn").click(function(event){
    event.preventDefault();
    var urlSplit=$(this).attr("href").split("/");
    var userid = urlSplit[urlSplit.length-1];
    var status = urlSplit[urlSplit.length-2];
    var $self = $(this); 

    if(status === 'activate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'activated'){
                $self.text("Activated");
                // what to do here
                $self.attr('href', $self.attr('href').replace('activate', 'deactivate'));
                $self.removeClass('btn-danger').addClass('btn-success');
                $self.attr('title', 'Activate');
            }
        });

    }

    if(status === 'deactivate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'deactivated'){
                //what to do here
                $self.text("Inactive");
                $self.attr('href', $self.attr('href').replace('deactivate', 'activate'));
                $self.removeClass('btn-success').addClass('btn-danger');
                $self.attr('title', 'Deactivate');
            }
        });

    }
});

Simple mockup: http://jsfiddle.net/TrueBlueAussie/9gLta/2/

I knocked out the Ajax calls to test it.

Update: Note the question code was changed after this was posted to include most of this code.