我需要獲取對在 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 嗎？
uj5u.com熱心網友回復：
您可以通過創建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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/416739.html
標籤：
上一篇：NodeJS-我如何在NodeJS/JavaScript中使用python'for_inrange(number)'