請(qǐng)考慮下面這段簡(jiǎn)短的代碼:

https://svelte.dev/repl/e3ea17e8e09044999bf7cb4bc882adea?版本=3.19.2

我如何調(diào)整它，以便每個(gè)按鈕都可以獨(dú)立切換？ 正如你所看到的，它目前切換所有的按鈕:(

您必須維護(hù)每個(gè)按鈕的狀態(tài)，如下所示:

<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>

因此，對(duì)于那些想要更深入回答上述問題的人，我創(chuàng)建了一個(gè)細(xì)長(zhǎng)的按鈕組件，允許在這個(gè)REPL上切換和打開鏈接

https://svelte.dev/repl/c5b48ef759d045d08d17b5f11b74e82e?版本=3.19.2

盡情享受吧！

除了必須創(chuàng)建一個(gè)新組件或創(chuàng)建一個(gè)跟蹤變量之外，另一種方法是使用您想要切換的類。舉個(gè)例子:

element.classList.toggle('className');