javascript - Toggle class on buttons in Svelte - Stack Overflow

admin管理员组

文章数量:1392095

Consider this Svelte code

{#each filters as filters, i}
   <div class='filter-container'>
      <div class='button filter' on:click={ () => setFilter(filters.name, filterContext)}>{filters.name}</div>          
   </div>
{/each}

The above filter buttons are made depending on how many filters there are in some js object. How can I create a class that is toggled for all filter buttons when the one button is clicked.

eg. when one is active all the others are not?

Consider this Svelte code

{#each filters as filters, i}
   <div class='filter-container'>
      <div class='button filter' on:click={ () => setFilter(filters.name, filterContext)}>{filters.name}</div>          
   </div>
{/each}

The above filter buttons are made depending on how many filters there are in some js object. How can I create a class that is toggled for all filter buttons when the one button is clicked.

eg. when one is active all the others are not?

• javascript
• svelte

Share Improve this question Follow edited May 30, 2020 at 21:49 doğukan 27.7k1313 gold badges6363 silver badges7575 bronze badges asked May 30, 2020 at 21:48 Timmy LeeTimmy Lee 80511 gold badge1212 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Class are just strings - in svelte you can bind them to an expression as any other attribute.

For example:

<div class={'button filter ' + (activefilter === filters.name ? 'isactive' : '')}/>

when activefilter === filters.name is true, then the button class will became 'button filter isactive'

A special short syntax to toggle classes is provided too. Find more here

We can easily bind class names to expressions, so that the class will be added if the expression bees truthy:

<script>
    let isActive = false
</script>

<style>
    .active {
        color: red;
    }
</style>

<h1 class:active={isActive}>Hello!</h1>
<button on:click={() => isActive = !isActive}>Click me</button>

Here, clicking the button toggles the isActive boolean. The class active is bound to that variable on the h1 element and you can see that the color now changes on every button click.

That is the standard way on how to set single classes dynamically.

REPL: https://svelte.dev/repl/988df145876a42c49bb8de51d2cae0f2?version=3.23.0

本文标签： javascriptToggle class on buttons in SvelteStack Overflow