如何在 svelte 中设置元素的 class

Question

我有一个精巧的应用程序，我希望在用户单击它时突出显示一行；类似于这个简单的代码：

<div id="A" class="car-even">A</div>
<div id="B" class="car-odd">B</div>


<style>
    .car-even  {
        color: #008800;
        cursor: pointer;
    }

    .car-odd  {
        color: red;
        cursor: pointer;
    }

    .car-selected  {
        color: blue;
        background-color: #ffffaa;
        cursor: pointer;
    }
</style>

<script>
    row = document.getElementById('A')
    row.className = 'car-selected '
</script>

但在 svelte 中，className 似乎没有正确更新。怎么了？

App.svelte

<script>
    import Car from './cars.svelte'
    let car = ''
    $: console.log('Car', car)
</script>

<Car bind:selected_car={car}/>

Cars.svelte

<script>
    let cars = ['Audi', 'BMW', 'Hillman', 'Hyundai', 'Jaguar']
    export let selected_car = ''
    let car_class = ['car-even', 'car-odd']

    function carClicked(car) {
        selected_car = car
        let car_row = document.getElementById(car)
        car_row.className = 'car-selected'
    }
</script>

{#each cars as car, index (car)}
    <div id={car} class="{car_class[index % 2]}" on:click={() => carClicked(car)}>{car}</div>
{/each}

<style>
    .car-even  {
        color: #008800;
        cursor: pointer;    
    }

    .car-odd  {
        color: #000088;
        cursor: pointer;
    }

    .car-selected  {
        background-color: #ffffaa;
        cursor: pointer;
    }
</style>

Answer 1

您的示例似乎不起作用，因为 .car-selected css class 未编译，因为它未在任何地方使用（编译器知道）。如果您查看 html，点击时会添加 class（但这也 overwrites/removes 另一个 class）
如果添加 :global() 修饰符 :global(.car-selected)，您会看到 class 已应用

要以 Svelte 的方式做到这一点，请改用 class:directive 并将其添加到每个循环中的 div

class:car-selected={car === selected_car}

如果你想要 REPL

，你可以删除 carClicked()

{#each cars as car, index (car)}
<div id={car}
         class="{car_class[index % 2]}"
         class:car-selected={car === selected_car}
         on:click={() => selected_car = car}
    >
    {car}
</div>
{/each}

((+ 为什么不减少重复并利用 Svelte 的作用域样式并添加

    div {
        cursor: pointer;
        user-select: none;
    }

))

如何在 svelte 中设置元素的 class

How to set an element's class in svelte

css

svelte