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.
Code is wrong in two ways:
.classList.add(".piece__show")
there is a .
in front of the class that should not be there, it's not a selector.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.)