在 javascript 中访问显示的 DOM 元素 - Svelte

Question

我正在创建一个自定义选择下拉组件，简化如下：

<script lang="ts">
    let optionsOpen: boolean = false;

    function onSelectClick(e) {
        optionsOpen = !optionsOpen;
        let p = e.target.closest('.select');
        let child = p.querySelector('.options');
        console.log(child);  //always null
    }
</script>


<div class="select" on:click={onSelectClick}>
    {#if optionsOpen}
        <div class="options">
            My Options
        </div>
    {/if}
</div>

从上面您将看到，当单击带有 .select 类的 div 时，选项容器将打开（通过 optionsOpen 变量）。

但是，在 onSelectClick 中，我需要在打开选项 div DOM 元素后访问它。我可以访问选择 div，但不能访问子选项 div，它总是返回 null。

我怀疑这可能是因为当我尝试访问它时，选项元素尚不可用，即使我在尝试访问之前将 optionsOpen 变量设置为。

有什么想法如何在选项 div 可见后访问它吗？

Answer 1

解决此问题的另一种方法是使用Svelte 操作。这是一个自定义函数，在添加 DOM 节点时运行，并让您可以直接访问该节点。

这比使用 更惯用querySelector。

<script>
    let optionsOpen = false;

    function onSelectClick(e) {
        optionsOpen = !optionsOpen;
    }
    
    function adjustPosition(node) {
        // this will run when <div class="options"> is added to the DOM
        node.style.top = '300px'; // or whatever you want to do
    }
</script>


<div class="select" on:click={onSelectClick}>
    Select
    {#if optionsOpen}
        <div class="options" use:adjustPosition>
            My Options
        </div>
    {/if}
</div>