Svelte循环中绑定Div到item.id实现独立项交互的问题

核心问题分析 #

原来的代码里，toggle是全局变量，settings是单个DOM绑定，所有循环生成的按钮共享这两个变量，导致点击任意按钮都会触发同一个面板的显示/隐藏，无法实现独立交互。

修改方案 #

1. 用对象存储每个item的独立状态：创建itemStates对象，以item.id为键，存储每个item的toggle状态和对应的settings DOM元素。
2. 将设置面板移入循环内部：每个item对应自己的设置面板，不再共用同一个DOM元素。
3. 使用Svelte类绑定语法：替代直接操作classList，更符合框架响应式规范，避免DOM操作冲突。
4. 修改settingFun函数：针对当前itemId对应的状态和元素进行操作。

完整代码示例 #

<script>
  let newArray = [/* 你的数组数据 */];
  // 初始化每个item的状态，默认toggle为false（面板隐藏）
  let itemStates = {};
  newArray.forEach(item => {
    itemStates[item.id] = { toggle: false, settings: null };
  });

  function settingFun(itemId) {
    // 切换当前item的toggle状态
    itemStates[item.id].toggle = !itemStates[item.id].toggle;
  }
</script>

{#each newArray as item (item.id)}
  <button class="px-2 py-1" on:click={() => settingFun(item.id)}>
    (Id: {item.id})<Setting />
  </button>
  
  <!-- 每个item独立的设置面板，用类绑定控制显示隐藏 -->
  <div 
    class="border py-2 shadow-md"
    class:hidden={itemStates[item.id].toggle}
    bind:this={itemStates[item.id].settings}
  >
    <div class="flex justify-between items-center">
      <div class="flex py-3 px-2">
        <div class="bg-[#D9D9D9] px-3 py-2 rounded-lg font-semibold">
          <Button label="Not Empty" />
        </div>
        <div class="ml-5 bg-[#D9D9D9] px-3 py-2 rounded-lg font-semibold">
          <Button label="Is Unique" />
        </div>
      </div>
      <div class="flex relative menus"></div>
    </div>
  </div>
{/each}

关键细节说明 #

• 状态隔离：itemStates确保每个item的toggle状态独立，不会互相干扰。
• 响应式类绑定：class:hidden={itemStates[item.id].toggle}直接根据状态控制面板显示/隐藏，无需手动操作classList，简洁且符合Svelte响应式原理。
• DOM绑定：每个设置面板的bind:this绑定到itemStates[item.id].settings，如果需要额外DOM操作，可通过该属性访问，但优先使用框架响应式语法。

如果必须保留手动操作classList的方式，可修改settingFun如下（需同时将settingIcon也绑定到itemStates对应项）：

function settingFun(itemId) {
  const state = itemStates[item.id];
  state.toggle = !state.toggle;
  if (!state.toggle) {
    state.settings.classList.remove("hidden");
    state.settingIcon.classList.add("bg-gray-200", "rounded-lg");
  } else {
    state.settings.classList.add("hidden");
    state.settingIcon.classList.remove("bg-gray-200", "rounded-lg");
  }
}

内容的提问来源于stack exchange，提问作者Aryan K.C.