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变了，按钮内容也变了。然而，这些类(class)没有。

一些想法？

干杯

Answer 1

您要添加按钮具有的类并删除按钮不具有的类。

试试这个:

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