Блог

Прежде всего, извините, если вопрос не имеет особого смысла. Мне трудно правильно сформулировать вопрос, но это то, что я пытаюсь сделать.

Текущее поведение Позволяет переключать класс css между двумя тегами h1, но не может переключаться после включения переключения; это означает, что невозможно удалить класс css в h1 теге, где класс css уже включен.

Предполагаемое поведение При нажатии на тот же активный h1 , он должен удалить класс css.

Ссылка на REPL, также тот же код ниже.

Приложение

 <script>
    import Component2 from './Component2.svelte'
    let numbers = [1,2];
    let selectedOption;
    const runThis = (i) => {
        selectedOption = i;
    }
</script>

{#each numbers as number}
    <Component2 isSelected={selectedOption === number} {number} on:click={()=>runThis(number)}/>
{/each}
  

Component.svelte

 <script>
    export let number;
    export let isSelected;
</script>

<h1 on:click class:red={isSelected}>Hello {number}</h1>

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

Проблема с переключением заключается в том, что вы должны быть уверены, что новый выбранный номер не является тем, который уже выбран. Поэтому, если текущее selectedOption значение совпадает с i , просто установите его на null :

 const runThis = (i) => {
    selectedOption = i !== selectedOption ? i : null;
}
  

Смотрите REPL.

Найден ответ

App.svelte

 <script>
    import Component from './Component.svelte'
    let numbers = [1,2];
    let selectedOption;
    const runThis = (i) => {
        if(selectedOption===i)
            selectedOption=-1
        else
           selectedOption = i;
    }
</script>

{#each numbers as number}
    <Component isSelected={selectedOption === number} {number} on:click={()=>runThis(number)}/>
{/each}
  

Component.svelte

 //same