Question

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

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

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

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

因为类型是动画 OR 喜剧 AND 演员是约翰·杜（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
    })
  })
})

同时ShuffleJS过滤器OR + AND

2 个答案: