javascriptcsssveltekitdynamically-generated

Mouseover Event on Dynamically Loaded Images in Sveltekit


I am dynamically loading images in Sveltekit. They are inside a div along with an overlay div that I want o show when the images is hovered over. I have tried a few different things, including setting the id of the image container to the id of the images loaded, but the id doesn't seem to be getting set.

This is what I have so far:

<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>

I am new to Sveltekit! Any advice would be appreciated.


Solution

  • Code is wrong in two ways:

    I see no reason why the id would not be applied, unless there just isn't one in your data source.

    Would recommend extracting the contents of the #each to a separate component so you can have local state for each item. E.g.

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

    (Alternatively, you could also add such state data directly to your source objects instead, then you do not need a separate component.)