Как добавить и удалить классы для выбранных кнопок?

Question

У меня есть несколько кнопок, которые пользователь может выбрать:

<button id="Invitation" class="btn btn-info btn-lg" onclick="SetType(1);"> 
<i class="fa fa-info-circle fa-fw"></i>Invitation</button> 
<button id="Assistance" class="btn btn-info btn-lg" onclick="SetType(2);"> 
<i class="fa fa-info-circle fa-fw"></i>Assistance</button> 
<button id="Finalize" class="btn btn-info btn-lg" onclick="SetType(3);"> 
<i class="fa fa-info-circle fa-fw"></i>Finalize</button> 

Все они начинаются с тем же классом, но когда пользователь нажимает кнопку, я хочу, чтобы добавить класс. Если они выбирают другую кнопку, я хочу удалить этот добавленный класс и применить его к другой кнопке. У меня есть следующее:

$(document).ready(function() { 

    $("#Invitation,#Assistance,#Finalize").click(function() { 
     $(this).removeClass("btn btn-info btn-lg"); 
     $(this).addClass("btn btn-success btn-lg"); 
    }); 
}); 

Но он делает все 3 кнопки зелеными, когда я их нажимаю. Как я могу удалить btn btn-success btn-lg с кнопки, когда ее не выбрали?

Answer 1

Вы можете попробовать это:

$(document).ready(function() { 
    $("button").click(function() { 
     $(this).toggleClass("btn-info btn-success"); 
     $("button").not(this) 
      .removeClass("btn-success") 
      .addClass("btn-info"); 
    }); 
}); 

Вот fiddle.

Answer 2

$(document).ready(function() 
{ 
$("#Invitation #Assistance #Finalize").click(function() 
{ 
$(this).removeClass("btn btn-info btn-lg"); 
$(this).addClass("btn btn-success btn-lg"); 
}); 
});