クリックして別の画像をスワンプして元に戻す

Question

こんにちはスタックオーバーフローの人！

クリックしたときにプラスからマイナスに変更したいドロップダウンメニューのボタンがあります。

イメージをマイナスに変更できますが、プラスに戻すことはできません。

私はjQueryを使用しています。これまでのところ進歩があります。

 <div class="plus-button"></div> 

$('.plus-button').on('click', function(){ 
    $('.plus-button').removeClass('plus-button'); 
    $(this).addClass('minus-button'); 
}); 

Answer 1

toggleClass()に複数のクラス名を渡すことができます。おそらくこれは要素の現在の状態を追跡する必要がないため、これを行う最も簡単な方法です。

$('.my-button').on('click', function(){ 
 
    $(this).toggleClass('plus-button minus-button'); 
 
});

.plus-button { 
 
    color: red; 
 
} 
 

 
.minus-button { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="my-button plus-button">BUTTON</div>