I need to get a reference to every div created inside a each loop in svelte, then I'll use the reference to toggle css class of a certain div when the user clicks on previous 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 array have three objects, and it always appears the last div with text "Content Option 2" despite clicking on another div.
is possible to bind each div separately?
You can solve this by making contentOptions an array, bind with the index bind:this={contentOptions[i]} and use the index inside the function to target the right reference > 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>
This would be an alternative way without the need of the extra array and handling binding and index 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>