Svelte 如何在每个 lop 内绑定 div 以使用此方法获取引用

Question

我需要获取对 svelte 中每个循环内创建的每个 div 的引用，然后当用户单击前一个 div 时，我将使用该引用来切换特定 div 的 css 类。

    let contentOptions;
    
    function handleClick(event) {
    
        contentOptions.classList.toggle("close");
    
    }
    
    {#each items as item, i}
      
      <div class="titleOption" on:click={handleClick}>
        <img src="./assets/{item.icon}"/>
        <span>{item.label}</span>
      </div>
      
      <div class="content close" bind:this={contentOptions}>Content Option {i}</div>
       
    {/each}

Items 数组具有三个对象，尽管单击另一个 div，但它始终显示最后一个带有文本“Content Option 2”的 div。

可以单独绑定每个div吗？

Answer 1

您可以通过创建contentOptions一个数组、与索引绑定bind:this={contentOptions[i]}并使用函数内的索引来定位正确的引用来解决此问题> REPL

<script>
    const items = [{label: 'item1'}, {label: 'item2'}]
    let contentOptions = [];

    function handleClick(index) {
        contentOptions[index].classList.toggle("close");
    }
</script>

{#each items as item, i}

<div class="titleOption" on:click={() => handleClick(i)}>
    <span>{item.label}</span>
</div>

<div class="content close" bind:this={contentOptions[i]}>Content Option {i}</div>

{/each}

<style>
    .close {
        background: red;
    }
</style>

这将是一种替代方法，不需要额外的数组并处理绑定和索引REPL

<script>
    const items = [{label: 'item1'}, {label: 'item2'}]

    function handleClick(event) {
        event.currentTarget.nextElementSibling.classList.toggle('close')
    }
</script>

{#each items as item, i}

<div class="titleOption" on:click={handleClick}>
    <span>{item.label}</span>
</div>

<div class="content close">Content Option {i}</div>

{/each}

<style>
    .close {
        background: red;
    }
</style>