[SOLVED] Problem with box in repeater

Ask the community
,
1

Hi,
I added a hidden box into a repeater. This box is hidden and after I mouse in on the image inside the container that box will show up.
Well, the problem is that button will show up in all containers not only that specific one.

1761×323 160 KB

Any idea?
Thanks, Jakub

2

You need to make sure that you access the components in a Repeater by using the Repeated Item Scope .

3

Hi Jakob,

View the code below:

$w.onReady(function () {

    $w("#dataset").onReady(() => {
        $w('#repeater').onItemReady(($item, itemData, index) => {
            $item('#box').onMouseIn(() => {
                $item('#image').show()
            });
            $item('#box').onMouseOut(() => {
                $item('#image').hide()
            });
        });
    });
});

First, I add an container box and image to the repeater and set the image’s properties to be hidden on load.
I add an onItemReady() event handler and inside I add an onMouseIn() and onMouseOut() events handler to each scope (each item).
As a result, after hovering on one of the boxes the onMouseI() event will be triggered and the event will occurs only on the specified item that your are pointing on.

Here you can read more about onItemReady() event.

Best,
Sapir