ShuffleJS FIlters OR +和同时

Question

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

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

获取我的所有项目，其中"data-st“包括1或2和 "data-nd=”包括4或5和 "data-rd“包括7或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>

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

因为它的类型要么是动画，要么是喜剧，演员是无名氏。

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
    })
  })
})