JQuery onclick toggle имя класса

Используя jQuery, как мне переключить класс A в класс B при нажатии на ссылку:

<a class="switch" href="#">Switch</a>
<div class="classA"></div>


$('.switch').on('click', function(e){
    $('.classA').removeClass('classA').addClass('classB');
    e.preventDefault();
};

Как мне переключить класс, а не просто заменить его, как я здесь делаю?

Ответы

Ответ 1

jQuery имеет функцию toggleClass:

<button class="switch">Click me</button>

<div class="text-block collapsed pressed">some text</div>

<script>    
    $('.switch').on('click', function(e) {
      $('.text-block').toggleClass("collapsed pressed"); //you can list several class names 
      e.preventDefault();
    });
</script>

Ответ 2

вы можете использовать toggleClass() для переключения класса, это действительно удобно.

случай: 1

<div id='mydiv' class="class1"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class2"></div>

случай: 2

<div id='mydiv' class="class2"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class1"></div>

случай: 3

<div id='mydiv' class="class1 class2 class3"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class3"></div>