Показать сообщение отдельно
  #1 (permalink)  
Старый 26.12.2017, 16:38
Интересующийся
Отправить личное сообщение для Argonaft Посмотреть профиль Найти все сообщения от Argonaft
 
Регистрация: 10.11.2011
Сообщений: 12

Изменение класса у элемента
Есть страница с кнопкой активации и деактивации чего либо.
Задача сделать, что при клике на кнопку менялся ее стильно на противоположный. Ну допустим если активная кнопка, кликаем получаем в ответ что кнопка становиться деактивная. И наоборот. Первая часть вопроса решена , при клике скажем по кнопке она меняет цвет все ок. Но при повторном клике на той же кнопке с измененным цветом class удаляет вообще все оставляя только:
btn btn-sm
Как же так это два разных условия. Что делать как победить?

$(document).ready(function(){

    //deactive
    $('.btn.btn-warning.btn-sm').click(function(event) {
      var id = event.target.dataset.bid;
      $('#b-'+id).removeClass("btn btn-warning btn-sm");
      $('#b-'+id).toggleClass("btn btn-success btn-sm");
    });

    //active
    $('.btn.btn-success.btn-sm').click(function(event) {
      var id = event.target.dataset.bid;
      $('#b-'+id).removeClass("btn btn-success btn-sm");
      $('#b-'+id).toggleClass("btn btn-warning btn-sm");
    });

  });

пример кнопки
<button type="button" id="b-3" data-bid="3" class="btn btn-warning btn-sm">Выключить</button>
Ответить с цитированием