在 Svelte 组件中切换类答案

【问题标题】：Toggle Classes in Svelte Component在 Svelte 组件中切换类
【发布时间】：2020-03-08 21:23:17
【问题描述】：

考虑一下这个 Svelte 代码：

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

如何调整它以便每个按钮都可以独立切换？如您所见，它当前切换了所有按钮:(

【问题讨论】：

自问起您似乎修改了 REPL 中的代码？对于未来的访问者来说，在问题中发布相关代码会很好。 SO喜欢让它的线程自包含而不依赖于可以改变的外部链接的内容；）
是的.. 没有问题.. 我会恢复它并为我正在做的事情开始一个新的 repl：D

标签： javascript css svelte svelte-component

【解决方案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>

【讨论】：

好吧，鉴于您需要监控 3 个按钮状态，这是不可避免的。 :) 如果答案有帮助，请接受。
我刚刚在 svelte discord 上被告知您可以使用按钮组件执行此操作，然后避免执行上述操作。让我在接受答案之前先测试一下
虽然制作一个 Button 组件可能是一个很好的建议（或者如果只是为了添加一个类，也可能是矫枉过正？），我认为这确实回答了最初的问题。

【解决方案2】：

因此，对于那些想要更深入地回答上述问题的人，我创建了一个纤细的按钮组件，允许在此 REPL 上切换和打开链接

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

享受吧！

【讨论】：

【解决方案3】：

除了必须制作新组件或创建用于跟踪的变量之外，另一种方法是使用您要切换的类。举个例子：

element.classList.toggle('className');

【讨论】：

if/else 块可以简化为 classList.toggle(className)
谢谢！那好多了。为未来的观众更新了答案