如何在按下的按钮上动态设置类？答案

【问题标题】：How to set class Dynamically on pressed button?如何在按下的按钮上动态设置类？
【发布时间】：2019-03-17 14:27:10
【问题描述】：

我有带有图标的 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 { ... }
...

每个图标。

当前的想法是在按钮激活（按下）时在按钮上设置“彩色”类我该如何实现？

有没有办法订阅 JQuery 中的 css 更改？

【问题讨论】：

为什么不想使用:active CSS 伪类？这似乎是完美的解决方案。使用 JS 作为 UI 的拐杖并不是一个好习惯。
I do not want to repeat some code like 您可以只设置button:active .iconA，但使用!important 运算符，因此您不需要为每个类设置活动样式。但是，是的，你不需要 jquery。

标签： jquery html css sass

【解决方案1】：

我希望这样的事情能有所帮助：

$(document).ready(function () {

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

});

【讨论】：