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");
 }); 
});

如何在选定的按钮中添加和删除类？

2 个答案: