Как установить класс динамически на нажатой кнопке?

Question

У меня есть кнопки html со значком, и значок будет временно меняться всякий раз, когда кнопка станет активной (нажата).Значки кнопок определены в отдельных файлах, содержащих их в разных состояниях.

Пример: iconA.scss

%iconA_state1 { background-image: url(data:image/svg+xml;base64,...); }
%iconA_state2 { background-image: url(data:image/svg+xml;base64,...); }
.iconA { @extend %iconA_state1; }
.colored .iconA { @extend %iconA_state2; }

И кнопка:

<button><div class="icon"></button>

Файлы значков не зависят от кнопок и могут использоваться для других целей, поэтому яне хочу иметь специфичные для кнопки css в файлах значков и никакого «поведения», как селектор css: accent.Также в идеале я не хочу повторять какой-либо код, например

button:active .iconA { ... }
button.differentstyle:active .iconA { ... }
...

для каждого значка.

В настоящее время идея состоит в том, чтобы устанавливать «цветной» класс для кнопки всякий раз, когда она становится активной (нажатой)Как мне этого добиться?

Есть ли способ подписаться на изменения css в JQuery?

Answer 1

Надеюсь, что-то подобное может помочь:

$(document).ready(function () {

   $('button').on('click', function () { 
       $(this).addClass('colored');
   });

});