在 Svelte 中使用 javascript 启用和禁用 div 元素

Question

The following Svelte file produces a tree in which elements can be clicked.

Current behaviour

The problem I have is that when I click on the div-element, the element is focused, but the previous elements are not focused.

Expected behaviour

Only one div is active at the same time.

Trials

I've tried several re-writings of this code, but it seems like I need to keep track of some kind of history, to undo focus.

<script lang="ts">
    import type { FrontendFile } from '$lib/front';
    export let content: FrontendFile;
    export let history: FrontendFile[];
    let text: string;
    function focusUnfocus() {
        for (let i=0; i++; i < history.length) {
            history[i].status.focused = false;
        }
        content.status.focused = !content.status.focused;
        history.push(content);

        if (content.status.focused) {
            text = 'font-black';
        } else {
            text = '';
        }
    }       


</script>
<div class="{text}" on:click={focusUnfocus}>
    {content.name}
</div>
...
{#each content.children as sub}
    <svelte:self bind:history bind:content={sub} />
{/each}
...

Answer 1

I solved it with the following

<script lang="ts">
    import type { FrontendFile } from '$lib/front';

    export let content: FrontendFile;
    export let lastFocused: FrontendFile;

    function focusUnfocus() {
        if (lastFocused) {
            lastFocused.status.focused = false;
        }
        content.status.focused = true;
        lastFocused = content;
    }

    let text: string = '';
    $: if (content.status.focused) {
        text = 'font-black';
    } else {
        text = '';
    }

</script>
<div class=" {text}" on:click={focusUnfocus}>
    {content.name}
</div>

{#each content.children as sub}
    <svelte:self bind:lastFocused bind:content={sub} />
{/each}

I switched to 1-object history and changed the binding in the top level index.svelte file as follows.

<script lang="ts">
    export let lastFocused;
</script>
...
{#each filesystems as system}
    <RenderTree {lastFocused} bind:content={system}
{/each}
...