javascript - 如何使用 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");