如何实现首次加载时不显示HTML模板生成的卡片？

当前代码在获取数据后直接将卡片渲染到页面，未设置默认隐藏状态，导致首次加载时所有卡片都会显示。只需在创建卡片时默认添加隐藏类，即可实现「满足搜索条件前不显示任何卡片」的需求。

修改方案：给新创建的卡片默认添加隐藏类 #

在JavaScript的fetch回调逻辑中，为每个新生成的卡片元素添加hide类，确保页面加载完成后卡片默认处于隐藏状态。

修改后的fetch部分完整代码：

fetch("https://ucc.ar/_clusters/test.json")
  .then(res => res.json())
  .then(data => {
    users = data.map(user => {
      const card = userCardTemplate.content.cloneNode(true).children[0]
      card.classList.add('hide') // 新增此行，默认隐藏卡片
      const header = card.querySelector("[data-header]")
      const body = card.querySelector("[data-body]")
      header.textContent = user.name
      body.textContent = user.company
      userCardContainer.append(card)
      return {
        name: user.name,
        x: user.x,
        y: user.y,
        element: card
      }
    })
  })

逻辑说明 #

1. 页面加载完成后，所有卡片默认带有hide类，通过CSS的display: none规则隐藏。
2. 当用户在搜索框输入内容时，现有逻辑会根据输入长度和匹配条件动态切换hide类的状态：
   • 输入长度小于3时，保持hide类（卡片隐藏）。
   • 输入长度≥3时，根据名称匹配或距离条件，移除符合条件卡片的hide类（卡片显示）。

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