How to show hide a class?

On ajax success I have to hide a 开发者_JS百科class and show the different class. Suppose I have "foo" and "bar" two classes. Now it has "foo" class when my ajax returns success then I want to show the "bar" class.

$.ajax({
        type:'POST',
        url:"/test/",
        data:{"test_data": my_data},
        success:function(data) {

        },
        dataType:"json"
        // here I want to hide the "foo" class and show the "bar" class.
    });

Actually "foo" and "bar" is a class of button. when i click button having "foo" class it should hide and button having "bar" class should be shown. and vice versa

You didn't mentiond on which element you want to apply this. Anyway this will give you an idea:

$.ajax({
    type:'POST',
    url:"/test/",
    data:{"test_data": my_data},
    success:function(data) {

    },
    dataType:"json"
    complete: function(xhr) {
       // if you want to switch classes on a specific element
       $('element_you_want_to_switch_classes').toggleClass('foo bar');

       // if you want to show/hide different elements
       $('.foo').hide();
       $('.bar').show();
    }
});

This will apply the changes after the ajax request has completed (regardless if it fails or not). If you just want to apply the changes on success just pack that lines into your success handler.

$(".foo").hide();
$(".bar").show();

Just put the hide and show commands in the success function:

....
success:function(data) {
  $(".foo").hide();
  $(".bar").show();
}