FIlters OR + AND at the same time

Hi there,

I was wondering if it is possible to have several "data-groups" at the same time and filter them like this:

<div data-st='["1", "2", "3"]' data-nd='["4", "5", "6"]' data-rd='["7", "8", "9"]' />

Get my all item where "data-st" includes either 1 OR 2 AND "data-nd=" includes either 4 OR 5 AND "data-rd" includes either 7 OR 8.

I have tried many things already, but I can not figure it out... :(

And to make it more complex... Can ST, ND and RD be dynamic?

The wanted result would be all elements matching:

data-st == 1 || data-st == 2 && data-nd == 4 || data-nd == 5 && data-rd == 7 || data-rd == 8

And with dynamic values...

var values = { hello: [1,2,3], world: [4,5,6]}

<div data-hello='["1","2","3"]' data-world='["4","5","6"]' />

<button data-group="genre" data-value="animation">Animation</button>

<button data-group="genre" data-value="comedy">Comedy</button>

<button data-group="genre" data-value="drama">Drama</button>

<button data-group="actor" data-value="John Doe">John Doe</button>

<button data-group="actor" data-value="Laura Smith">Laura Smith</button>

<ul>
  <li data-genre='["animation", "comedy"]' data-actor='["John Doe", "Laura Smith"]'>
    Black Panther
  </li>
  <li data-genre='["comedy"]' data-actor='["John Doe"]'>
    Spiderman
  </li>
  <li data-genre='["drama"]' data-actor='["John Doe"]'>
    Superman
  </li>
  <li data-genre='["animation"]' data-actor='["Laura Smith"]'>
    Batman
  </li>
</ul>

So when I click on "Animation + Comedy". I should see "Black Panther + Spiderman + Batman" After that I click on "John Doe". I should see now only "Black Panther + Spiderman"

Because the genre is either animation OR comedy AND the actor is John Doe

Vestride / Shuffle

FIlters OR + AND at the same time #250