Рассмотрим этот код Svelte:
https://svelte.dev/repl/e3ea17e8e09044999bf882cba4bf7cba4e08e08e04e6e6e6e06e6e6e6 >
Как я могу настроить это так, чтобы каждую кнопку можно было переключать независимо? Как видите, в настоящее время он переключает все кнопки :(
Вы должны поддерживать состояние каждой кнопки следующим образом:
<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/c5b48ef759d045d08d173.19eversion/ >
Наслаждаться!
