在 Svelte 组件中切换 类
Toggle Classes in Svelte Component
考虑这个 Svelte 代码:
https://svelte.dev/repl/e3ea17e8e09044999bf7cb4bc882adea?version=3.19.2
我该如何调整才能使每个按钮都可以独立切换?
如您所见,它当前会切换所有按钮 :(
您必须像这样维护每个按钮的状态:
<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>
因此,对于那些想要更深入地回答上述问题的人,我创建了一个小巧的按钮组件,允许在此 REPL 中切换和打开链接
https://svelte.dev/repl/c5b48ef759d045d08d17b5f11b74e82e?version=3.19.2
尽情享受吧!
除了必须创建新组件或创建用于跟踪的变量之外,另一种方法是使用要切换的 class。例如:
element.classList.toggle('className');
考虑这个 Svelte 代码:
https://svelte.dev/repl/e3ea17e8e09044999bf7cb4bc882adea?version=3.19.2
我该如何调整才能使每个按钮都可以独立切换? 如您所见,它当前会切换所有按钮 :(
您必须像这样维护每个按钮的状态:
<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>
因此,对于那些想要更深入地回答上述问题的人,我创建了一个小巧的按钮组件,允许在此 REPL 中切换和打开链接
https://svelte.dev/repl/c5b48ef759d045d08d17b5f11b74e82e?version=3.19.2
尽情享受吧!
除了必须创建新组件或创建用于跟踪的变量之外,另一种方法是使用要切换的 class。例如:
element.classList.toggle('className');