Как кнопку изменить в твиттере начальной загрузки с помощью JQuery

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» до «БТН-успеха разблокировки пользователю -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-элемент управления и removeeclass для удаления класса из html contol.

Вы должны сделать это

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