Svelte 如何在每个循环中绑定 div 以使用此获取引用

Question

我需要获取在 svelte 中每个循环内创建的每个 div 的引用，然后我将使用该引用来切换某个 [=] 的 css class 20=] 当用户点击上一个 div.

    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。

，它总是出现在最后一个 div 和文本“Content Option 2”

是否可以分别绑定每个 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>

Svelte 如何在每个循环中绑定 div 以使用此获取引用

Svelte how to bind div inside each lop to obtain a reference using this

javascript

binding

svelte