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

Question

以下 Svelte 文件生成一個樹，可以在其中單擊元素。

當前行為

我遇到的問題是，當我點擊 div 元素時，該元素被聚焦，但之前的元素沒有被聚焦。

預期行為

同時只有一個 div 處於活動狀態。

試煉

我已經嘗試多次重寫這段代碼，但似乎我需要跟蹤某種歷史，以撤消焦點。

<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

我用以下方法解決了它

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

我切換到 1-object history 並更改了頂級index.svelte文件中的綁定，如下所示。

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