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

【问题标题】：enabling and disabling div element with javascript in Svelte在 Svelte 中使用 javascript 启用和禁用 div 元素
【发布时间】：2021-12-01 23:13:00
【问题描述】：

以下 Svelte 文件会生成一个可以单击元素的树。

当前行为

我遇到的问题是，当我点击 div-element 时，元素被聚焦，但前面的元素没有被聚焦。

预期行为

同时只有一个 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}
...

【问题讨论】：

不清楚您所说的内容不起作用。 for 循环中的 i 变量永远不会增加？ content 永远不会被设置？出现 JS 错误？您需要更详细地解释您预期会发生什么以及发生了什么。将重现步骤、预期行为和实际行为作为单独的部分列出，并附上您可能遇到的任何错误消息。见stackoverflow.com/help/how-to-ask
是的，感谢您指出这一点，我的 for 循环从未运行过。但这并不能解决问题。
for 循环的格式为for (let i=0; i < history.length; i++ ) {。您还没有解释在哪里设置内容。仍然没有足够的代码让我们知道发生了什么。我认为您不需要 Svelte 来弄清楚您的问题是什么。尝试构建一个类似的 JS 解决方案。您似乎没有调试并单步执行您的应用程序。
停止使用“focused”这个词，focused 意味着特定的东西，键盘焦点在哪里。您可能是指变暗和突出显示的部分。
@JuanMendes，内容是通过 Svelte 组件递归绑定的变量。它在顶级 index.svelte 中声明。抱歉，我发现有时很难调试纤细的代码。

标签： javascript html typescript svelte sveltekit

【解决方案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}
...

【讨论】：