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 { ... }
...

每个图标。

目前的想法是在按钮处于活动状态（按下）时将其设置为“彩色”类。

是否可以在JQuery中订阅CSS更改？

Answer 1

我希望这样可以帮助您

$(document).ready(function () {

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

});

如何在按下的按钮上动态设置班级？

1 个答案: