javascript - Toggle Classes in Svelte Component - Stack Overflow

admin管理员组

文章数量:1356701

Consider this Svelte code:

/repl/e3ea17e8e09044999bf7cb4bc882adea?version=3.19.2

How can I adjust this so that each button can be toggled independently? As you can see it currently toggles all of the buttons :(

Consider this Svelte code:

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

How can I adjust this so that each button can be toggled independently? As you can see it currently toggles all of the buttons :(

• javascript
• html
• css
• svelte
• svelte-ponent

Share Improve this question Follow edited Jun 8, 2023 at 7:26 Anurag Srivastava 14.5k44 gold badges3737 silver badges4646 bronze badges asked Mar 8, 2020 at 21:23 Timmy LeeTimmy Lee 80511 gold badge1212 silver badges2525 bronze badges 2

• Seems like you have modified the code in the REPL since asking? Would be nice for visitors from the future to post the relevant code in the question. SO likes having its threads self contained and not dependent on the content of external links that can change ;) – rixo Commented Mar 8, 2020 at 21:47
• yeah.. no probs.. i'll revert it and start a new repl for what i'm working on :D – Timmy Lee Commented Mar 9, 2020 at 9:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You have to maintain the state for each button like so:

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

So for those wanting a more in-depth answer to the above, I've created a svelte button ponent that allows toggling and opening of links at this REPL

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

Enjoy!

An alternative to either having to make a new ponent or creating a variable for tracking is to use the class that you want to toggle. As an example:

element.classList.toggle('className');

本文标签： javascriptToggle Classes in Svelte ComponentStack Overflow