css - CSS 中类似 flex 的状态/一次抓取多个 id-ed 元素

Question

假设我有一个带按钮的用户界面。用户界面有四种状态，每种状态的按钮都位于不同的 Angular 落。

在 Flex 中，这很容易实现，您只需定义这四种状态(topLeft、topRight、bottomRight、bottomLeft)，并且每个状态都有一个按钮位置值的覆盖。

您将如何使用 CSS 以一种可以通过简单赋值触发的方式来做到这一点？

flex :skin.currentState="topRight"JS:???

我已经在 css 中定义了类:

#button.topRight {...}
#button.topLeft{...}
#button.bottomRight {...}
#button.bottomLeft {...}

现在，在不知道 #button 存在的情况下，如何在一行代码中将四种状态之一应用到页面上定义了该状态的所有元素？

Answer 1

jQuery在 JavaScript 中提供了一个方便的抽象层:

$('.someClassName').addClass('blueOnLeft')  
$('.someClassName').removeClass('blueOnLeft')

这将以类名为“someClassName”的每个元素为目标。