ShuffleJS 过滤器 OR + AND 同时

Question

我想知道是否可以同时拥有多个“数据组”并像这样过滤它们：

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

获取我的所有项目，其中“data-st”包含 1 OR 2 AND “data-nd=" 包含 4 OR 5 AND "data-rd" 包括 7 OR 8。

我已经尝试了很多东西，但我无法弄清楚...... :(

为了让它更复杂... ST、ND 和 RD 可以是动态的吗？

想要的结果是所有匹配的元素：

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

还有动态值...

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>

所以当我点击“动画+喜剧”时。我应该看“黑豹+蜘蛛侠+蝙蝠侠” 之后，我点击“John Doe”。我现在应该只看到“黑豹+蜘蛛侠”

因为类型是动画或喜剧并且演员是John Doe

Answer 1

你可以先通过data-*属性的存在来收集所有的dom节点。然后按条件过滤。

var domNodes = document.querySelectorAll('[' + 'data-nd' + ']', '[' + 'data-rd' + ']', '[' + 'data-st' + ']');

var result = Array.from(domNodes).filter(node => {
  var nd = JSON.parse(node.dataset["nd"]);
  var rd = JSON.parse(node.dataset["rd"]);
  var st = JSON.parse(node.dataset["st"]);

  return (st.includes("1") || nd.includes("2")) && (nd.includes("4") || rd.includes("5")) && (nd.includes("8") || rd.includes("7"))
});

console.log(result.length);

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

Answer 2

答案来了。

<input type="checkbox" id="input-1" data-group="genre" data-value="animation" />
<label for="input-1">Animation</label>

<input type="checkbox" id="input-2" data-group="genre" data-value="comedy" />
<label for="input-2">Comedy</label>

<input type="checkbox" id="input-3" data-group="genre" data-value="drama" />
<label for="input-3">Drama</label>

<input type="checkbox" id="input-4" data-group="actor" data-value="John Doe" />
<label for="input-4">John Doe</label>

<input type="checkbox" id="input-5" data-group="actor" data-value="Laura Smith" />
<label for="input-5">Laura Smith</label>

<ul class="my-shuffle-container">
  <li class="item" data-genre='["animation", "comedy"]' data-actor='["John Doe", "Laura Smith"]'>
    Panther
    <div class="sizer"></div>
  </li>
  <li class="item" data-genre='["comedy"]' data-actor='["John Doe"]'>
    Spiderman
    <div class="sizer"></div>
  </li>
  <li class="item" data-genre='["drama"]' data-actor='["John Doe"]'>
    Superman
    <div class="sizer"></div>
  </li>
  <li class="item" data-genre='["animation"]' data-actor='["Laura Smith"]'>
    Batman
    <div class="sizer"></div>
  </li>
</ul>

...

var Shuffle = window.Shuffle
var ul = document.querySelector('.my-shuffle-container')
var sizer = ul.querySelector('.sizer')

var shuffleInstance = new Shuffle(ul, {
  itemSelector: '.item',
  sizer: sizer
});

var inputs = Array.from(document.querySelectorAll('input'))
var genres = []
var actors = []

inputs.forEach(function(input) {
    input.addEventListener('change', function(event) {
    const group = input.getAttribute('data-group')
    const value = input.getAttribute('data-value')

        if (input.checked && group === 'genre') {
        genres.push(value)
    }

    if (!input.checked && group === 'genre') {  
      genres.splice(genres.indexOf(value, 1))
    }

    if (input.checked && group === 'actor') {
        actors.push(value)
    }

    if (!input.checked && group === 'actor') {  
      actors.splice(actors.indexOf(value, 1))
    }

    shuffleInstance.filter(element => {
      console.log(actors, genres)

      const dataGenre = element.getAttribute('data-genre')
      const dataActor = element.getAttribute('data-actor')

      if (genres.length > 0 && !(genres.some(genre => _.includes(JSON.parse(dataGenre), genre)))) {
        return false
      }

      if (actors.length > 0 && !(actors.some(actor => _.includes(JSON.parse(dataActor), actor)))) {
        return false
      }

      return true
    })
  })
})