Necesito obtener una referencia a cada div creado dentro de cada ciclo en svelte, luego usaré la referencia para alternar la clase css de un div determinado cuando el usuario haga clic en el div anterior.
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}La matriz de elementos tiene tres objetos, y siempre aparece el último div con el texto "Opción de contenido 2" a pesar de hacer clic en otro div.
¿Es posible vincular cada div por separado?
Puede resolver esto haciendo que contentOptions una matriz, enlace con el índice bind:this={contentOptions[i]} y use el índice dentro de la función para apuntar a la referencia correcta> 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>Esta sería una forma alternativa sin la necesidad de una matriz adicional y el manejo del enlace y el índice 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>