Toggle Svelte 组件中的类

Question

考虑这个 Svelte 代码：

https://svelte.dev/repl/e3ea17e8e09044999bf7cb4bc882adea?version=3.19.2

我如何调整它以便每个按钮都可以独立切换？正如您所看到的，它当前切换所有按钮:(

Answer 1

您必须像这样维护每个按钮的状态：

<script>let active = {button1: false, button2: false, button3: false};</script>

<style>.active {background-color: #ff3e00; color: white;}</style>

<button class:active="{active.button1}" on:click="{() => active.button1 = !active.button1}">foo</button>
<button class:active="{active.button2}" on:click="{() => active.button2 = !active.button2}">bar</button>
<button class:active="{active.button3}" on:click="{() => active.button3 = !active.button3}">baz</button>