Sveltekit 中动态加载图像的鼠标悬停事件

Question

我正在 Sveltekit 中动态加载图像。它们位于一个 div 以及一个覆盖 div 内，当图像悬停在该 div 上时，我希望显示该叠加 div。我尝试了一些不同的方法，包括将图像容器的 id 设置为加载的图像的 id，但 id 似乎没有被设置。

这是我到目前为止所拥有的：

<div id="gallery">
  {#each data.products as product}
    <div class="imagewrapper">
      <div id={product.id} class="piece">
        <h3 class="name">{product.name}</h3>
        <p class="description">{product.meta_description}</p>
      </div>
      <img
        src={product.images[0].file.url}
        alt={product.name}
        on:focus={() => {}}
        on:mouseover={() =>
          document
            .querySelector(`#${product.id}`)
            .classList.add(".piece__show")}
      />
    </div>
  {/each}
</div>

我是 Sveltekit 的新手！任何建议将不胜感激。

Answer 1

代码有两个错误：

• 在

  .classList.add(".piece__show")

  中，类前面有一个不应该存在的

  .

  ，它不是选择器。
• 无论如何你都不应该这样做，弄乱 DOM 是不干净的并且会绕过编译器。这里例如编译器不会将该类识别为“正在使用”，因此如果将其添加到作用域样式，编译器只会将其删除并发出警告。

我认为没有理由不应用

id

，除非您的数据源中没有。

建议将

#each

的内容提取到单独的组件中，以便您可以拥有每个项目的本地状态。例如

<script>
  export let product;

  let show = false;
</script>
...
<div id={product.id} class="piece" class:piece__show={show}>...
<img ... on:mouseover={() => show = true}/>