jquery - jQueryonclickトグルクラス名

Question

jQueryを使用して、クリック時にclassAをclassBに切り替えるにはどうすればよいですか？

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


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

ここで行っているようにクラスを置き換えるのではなく、クラスを切り替えるにはどうすればよいですか？

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

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

Answer 3

別の属性の変更に依存させることもできます。このような：

$('.classA').toggleClass('classB', $('input').prop('disabled'));

この場合、classB入力がdisabled