javascript - 允许过滤器按次要条件排序和缩小范围

Question

我想让某人能够在第一个过滤条件中选择一个项目，然后通过选择第二个过滤条件来缩小该条件范围。

在此示例中，第一个过滤条件是日期，第二个过滤器集用于版本号。到目前为止，我只启用了它一次选择一个标准并查看它。

有什么方法可以做到这一点，还是我需要完全重新编写当前代码？

function addClassAll(el, cls) {

  for (var i = 0; i < el.length; ++i) {

    if (!el[i].className.match('(?:^|\\s)' + cls + '(?!\\S)')) {
      el[i].className += ' ' + cls;
    }
  }
}

function delClassAll(el, cls) {

  for (var i = 0; i < el.length; ++i) {
    el[i].className = el[i].className.replace(new RegExp('(?:^|\\s)' + cls + '(?!\\S)'), '');
  }
}

document.getElementById('filter-categories').onclick = function(evt) {
  evt = evt || window.event;
  var elem = evt.target || evt.srcElement;
  var filter = (elem.id == 'filter-all') ? '' : '.' + elem.id;
  var mask = document.querySelectorAll('#filter-mask');
  addClassAll(mask, 'filter-mask');

  setTimeout(function() {
    delClassAll(document.querySelectorAll('.filter-item'), 'selected');
    addClassAll(document.querySelectorAll('.filter-wrap'), 'filtered');
    addClassAll(document.querySelectorAll('.filter-item' + filter), 'selected');
  }, 500);

  setTimeout(function() {
    delClassAll(mask, 'filter-mask');
  }, 1000);
}

.filtered .filter-item {
  display: none
} /* filtered class applied via js */

.filtered .filter-item.selected {
  display: block
} /* selected class applied via js */

<div class="page-content">
  <span id="filter-categories">
    	<span class="filter-text">Feature Date:</span> <br>
  <input type="radio" id="filter-all" class="filter-input" name="filter" checked /><label for="filter-all" class="filter-label">All</label>
  <input type="radio" id="june" class="filter-input" name="filter" /><label for="june" class="filter-label">June</label>
  <input type="radio" id="july" class="filter-input" name="filter" /><label for="july" class="filter-label">July</label>
  <br><br>
  <span class="filter-text">Release Number:</span> <br>
  <input type="radio" id="one-one" class="filter-input" name="filter" /><label for="test" class="filter-label">1.1</label>
  <input type="radio" id="one-two" class="filter-input" name="filter" /><label for="ninefour" class="filter-label">1.2</label>
  <input type="radio" id="one-three" class="filter-input" name="filter" /><label for="ninefour" class="filter-label">1.3</label>
  </span>
  <div class="filter-wrap">
    <div class="filter-item june one-one">
      <h1>June release for version 1.1</h1>
    </div>
    <div class="filter-item june one-two">
      <h1>Late June release for version 1.2</h1>
    </div>
    <div class="filter-item july one-two">
      <h1>July release for version 1.2</h1>
    </div>
    <div class="filter-item july one-three">
      <h1>July release for version 1.3</h1>
    </div>
  </div>
</div>

标签： javascripthtmlcssfiltering