如何使用 jquery 更改 twitter bootstrap 中的按鈕

Question

我有一個按鈕：

<button
    class="btn btn-animated btn-default ban-user-btn"
    id="btn-ban-username" // the username is generated by twig
    data-nick="username"  // the username is generated by twig
    data-toggle="modal"
    data-target="#statusModal"
    >
    Ban user
    <i class="fa fa-ban"></i>
</button>

我需要將按鈕類從“btn-default ban-user-btn”更改為“btn-success unlock-user-btn”。 當我在我的 javascript 中執行以下操作時：

var button = $('#btn-ban-username);
button.addClass("btn-default");
button.addClass("ban-user-btn");
button.removeClass("btn-success");
button.removeClass("unlock-user-btn");
button.attr('id', 'btn-unlock-'+nick);
button.html("Unlock user <i class='fa fa-check'></i>");

我得到以下信息：

<button
    class="btn btn-animated btn-default ban-user-btn"
    id="btn-unlock-username"
    data-nick="username"
    data-toggle="modal"
    data-target="#statusModal"
>
    Unlock user
    <i class="fa fa-check"></i>
</button>

如您所見，ID 發生變化，按鈕內容發生變化。 然而，課程沒有。

一些想法？

干杯

Answer 1

您正在添加按鈕具有的類並刪除按鈕沒有的類。

嘗試這個：

$("#btn-ban-username")
.addClass("btn-success unlock-user-btn")
.removeClass("btn-default ban-user-btn");

Answer 2

在您的 JavaScript 代碼中，您必須顛倒 addClass 和 removeClass 的順序。 addclass 函數用於向 html 控件添加類，removeclass 用於從 html 控件中刪除類。

你必須這樣做

 var button = $('#btn-ban-username');
        button.removeClass("btn-default");
        button.removeClass("ban-user-btn");
        button.addClass("btn-success");
        button.addClass("unlock-user-btn");
        button.attr('id', 'btn-unlock-dev');
        button.html("Unlock user <i class='fa fa-check'></i>");