编写如何在每个LOP中绑定div以使用 [英] Svelte how to bind div inside each lop to obtain a reference using this

问题描述

我需要获取在svelte中的each循环内创建的每个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，但它始终显示带有文本和内容选项2的最后一个div。

是否可以分别绑定每个div？

推荐答案

您可以通过使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>

这篇关于编写如何在每个LOP中绑定div以使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！