How can I change repeater item background color based on click

Ask the community
,
1

Hi,

I would like to change the container background on click inside a repeater. After looking at the documentation here is my code

$userCards.onClick((event) => {
const data = $userCardRepeater.data;
let clickedItemData = data.filter(item => item._id === event.context.itemId)[0];
let $item = $w.at(event.context);

// If the data is not selected change the bg to red otherwise green
if (clickedItemData.selected !== true ) {
clickedItemData.selected = true ;
$item(‘#userCard’).style.backgroundColor = ‘red’;
} else {
clickedItemData.selected = false ;
$item(‘#userCard’).style.backgroundColor = ‘green’;
}
});

The error is that “style” is undefined on $item(“#userCard”) which is a valid Element.

So there is no StyleMixin on repeater Item.

How can I achieve the desired effect?

thx

2

Quentin, it appears that a repeater and the container that accompanies it cannot be styled . The box element can be though.

3

Yes I see. Could you be a little more descriptive about your solution with the box element?:thinking:

Thx

4

I ended up doing a little testing of a box element in a repeater and found it to be clumsier than I expected, for the lack of a better term. Apparently, the only thing that they have to offer in a repeater is the potential to be styled. Maybe, someone else has made them functional for this purpose?

5

Thx for your answers. I found out a hack where you use an image as the background which can be set for container instead of a bg color.

I’ll try but I’m open to better solution

6

So my final solution is to use a 1x1 pixel image with the color I want and use it as a background color

7

Wonderful, usually there is a tool in the toolbox …

8

Hello Quentin!
I trying today do the same.
Changing BGIMAGE
when MousIn - some colored image
when MoueOut - transparent

$w(“#myconteiner”).background.src = “https://mylink.com/bgim.png”;

It works but -but - but - change All BGImages in all Items of current Reprater.

I desperately trying found how specify Repeater containers Items in Current Repeater - and cannot
I believe that they are have some instance names, may be Array With Numbers like 0.1.2…

If You know - I will be very appreciate
May be somesing

let myclickedcontainer = $w.container(#mycontainer).clikedone - something like this… I try to guess - but currently unhappy, unsuccessful

Sincerely, Misha

9

@mazel Hi mazel,

What you need to do is to select the container with the item selector not the global selector

here is the local selecto $item vs global selecto $w

$userCards.onClick((event) => {
    let $item = $w.at(event.context);
     $item('#userCard').style.backgroundColor = 'red';

Read this for more details

10

@plomteuxquentin Dear Quentin - I spoke about Item in Repiter where No Style and Background color As You disscus here before - - only baclground Images… But when I change it - It changed in all Repeatr Items… I trying to find
ID
for each container after page opened - current moment. I hope they have some ID
And change BGImage by this ID

11

@plomteuxquentin I did It - Yes I use
Item (container) - background.src =

My Mistake was that I donot use Item after read Event -Thanks A Lot

Everthing working now and Selrctors working.

Sincerely Misha

12

@mazel , @plomteuxquentin

this is my solution, works for me. I Ioaded a image of just color hope you can get close for what you want

export function container2_mouseIn(event) {
      let $item = $w.at(event.context);
      $item("#container2").background.src = 'wix:image://v1/d98bc1_62f72eface604cdc8aad855cd618276a~mv2_d_1920_1280_s_2.jpg/wedding-1754493_1920.jpg#originWidth=1920&originHeight=1280'

}


export function container2_mouseOut(event) {
let $item = $w.at(event.context);
$item("#container2").background.src = ''

}

you can see the solucion on https://www.jrplannings.com/ in the firs form

13

Or you can just use the example here from Oct last year…
https://itnext.io/corvid-by-wix-imitating-hover-event-on-repeater-container-a65f4b6e0301

With the demo page here.
https://shoonia.wixsite.com/blog/imitate-hover-event-on-corvid

Otherwise, there is this previous forum post about it too.
https://www.wix.com/corvid/forum/community-discussion/setting-a-color-for-repeater-s-item

As this post is from early on last year, it is being closed.

1 Like