Как показать скрыть класс?

Question

На успех ajax мне нужно скрыть класс и показать класс. Предположим, что у меня есть «foo» и «bar» два класса. Теперь он имеет класс «foo», когда мой ajax возвращает успех, тогда я хочу показать класс «bar».

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

Фактически «foo» и «bar» - это класс кнопки. когда я нажимаю кнопку, имеющую класс «foo», она должна скрываться, а кнопка с классом «bar» должна отображаться. и наоборот

Answer 1

Вы не mentiond на какой элемент вы хотите применить это. Во всяком случае, это даст вам идею:

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

Это применит изменения после ajax request завершения (независимо, если он выходит из строя или нет). Если вы просто хотите применить изменения к успеху, просто упакуйте эти строки в свой success handler.

Answer 2

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

Answer 3

Просто поместите команды скрывать и показывать в функции успеха:

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