SVELTE实现：动态显示/隐藏单个JSON填充元素

问题核心在于你用了**全局单一状态showState**控制所有楼层的显示/隐藏，所以点击任何按钮都会同步切换所有内容。要实现每个按钮独立控制对应楼层，需要给每个楼层维护独立的显示状态，同时保持代码抽象不重复。

实现思路 #

1. 用响应式对象visibleFloors记录每个楼层的显示状态，键为楼层号，值为布尔值（true显示，false隐藏）
2. 点击按钮时传递对应楼层号给切换函数，仅修改该楼层的状态
3. 模板中根据visibleFloors对应楼层的状态判断是否显示内容

修改后的完整代码 #

<div class="parent-container">
  {#each rooms as room}
    <button on:click={() => toggleFloor(room.floor)}>
      楼层 {room.floor} {visibleFloors[room.floor] ? '隐藏' : '显示'}
    </button>

    {#if visibleFloors[room.floor] !== false}
      <div>
        <h2>楼层 {room.floor}</h2>
        {#each room.rooms as singleRoom}
          <div>
            <h3>房间 {singleRoom.number}</h3>
          </div>
        {/each}
      </div>
    {/if}
  {/each}
</div>

<script>   
  // 初始化所有楼层默认显示（要默认隐藏的话改成空对象{}即可）
  let visibleFloors = {
    1: true,
    2: true,
    3: true
  };

  function toggleFloor(floor) {
    // 切换对应楼层的显示状态，未定义时默认设为true
    visibleFloors[floor] = !visibleFloors[floor];
  }

  let rooms = [
    {
      floor: 1,
      rooms: [{number:101},{number:102},{number:103}]
    },
    {
      floor: 2,
      rooms: [{number:201},{number:202},{number:203}]
    },
    {
      floor: 3,
      rooms: [{number:301},{number:302},{number:303}]
    },
  ];
</script>

<style>
  .parent-container {
    gap: 1rem;
    display: flex;
    flex-direction: column;
  }
</style>

Svelte思维方式解读 #

1. 精准响应式状态：避免用单一状态控制多个独立元素，每个需要独立控制的部分对应独立的状态片段（这里就是visibleFloors中每个楼层的键值对）
2. 动态适配数据：利用each循环遍历rooms数组，不管数组长度如何变化，代码都能自动适配，不需要为每个楼层写重复的模板或逻辑
3. 直接控制渲染：优先用{#if}条件渲染控制元素显示/隐藏，而不是通过CSS类切换，这更贴合Svelte的编译式响应式特性，性能也更好

内容的提问来源于stack exchange，提问作者William