javascript - 修改搜索过滤器 // 不同部分的不同命令

Question

我一直在进行“简单”过滤搜索，但遇到了问题。目前我已经设置了它，以便每个复选框选择缩小搜索范围（即，如果您选择 location + feature1 + feature2 + feature3 它只会返回包含所有选项的结果）。现在我意识到，如果用户可以选择多个位置，然后按功能缩小结果范围，则更有意义。例如，如果用户选择位置“Kelowna + Penticton”和“feature1 + feature2 + feature3”，结果将来自这两个位置，但需要所有选定的特征。谁能告诉我我需要在我的代码中添加什么才能使这成为可能？

这是我当前代码的示例：

var $filterCheckboxes = $('input[type="checkbox"]');

function filterFunc() {
  var filterValues = [];

  $filterCheckboxes.filter(':checked').each(function () {
    var value = this.value;
    if (filterValues.indexOf(value) === -1) {

      filterValues.push(value);
    }   
  });

  $('.result')
    .hide()
    .filter(function(_, resultNode) {
      var categoryValues = $(resultNode).data('category').split(/\s+/);

      return filterValues.every(function (value) {
        return categoryValues.indexOf(value) > -1;
      });
    })
    .show();
}

$filterCheckboxes.on('change', filterFunc);

body { margin: -3px 0 0 0; }
.location, .element, .results { float: left; margin: 0 5px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="location">
  <strong>Location:</strong>
  <br/>
  <label>
    <input type="checkbox" value="kelowna" id="kelowna" />
    Kelowna
  </label>
  <br/>
  <label>
    <input type="checkbox" value="oliver" id="oliver" />
    Oliver
  </label>
  <br/>
  <label>
    <input type="checkbox" value="osoyoos" id="osoyoos" />
    Osoyoos
  </label>
  <br/>
  <label>
    <input type="checkbox" value="penticton" id="penticton" />
    Penticton
  </label>
  <br/>
  <label>
    <input type="checkbox" value="summerland" id="summerland" />
    Summerland
  </label>
  <br/>
  <label>
    <input type="checkbox" value="vernon" id="vernon" />
    Vernon
  </label>
  <br/>
  <label>
    <input type="checkbox" value="westk" id="westk" />
    West Kelowna
  </label>
  <br/>
</div>

<div class="element">
  <strong>Features:</strong>
  <br/>
  <label>
    <input type="checkbox" value="feature1" id="feature1" />
    feature1
  </label>
  <br/>
  <label>
    <input type="checkbox" value="feature2" id="feature2" />
    feature2
  </label>
  <br/>
  <label>
    <input type="checkbox" value="feature3" id="feature3" />
    feature3
  </label>
  <br/>
  <label>
    <input type="checkbox" value="feature4" id="feature4" />
    feature4
  </label>
  <br/>
  <label>
    <input type="checkbox" value="feature5" id="feature5" />
    Structural feature5
  </label>
</div>

<div class="results">
  <div class="result" data-id="aloe" data-category="penticton feature1 feature2">
    <a target="_blank" href="blank.png"><img src="blank.png" alt="Blank" width="600" height="400"></a>
    <div class="desc">Result 1</div>
  </div>
  <div class="result" data-category="kelowna feature1 feature2 feature 3">
    <a target="_blank" href="blank.png"><img src="blank.png" alt="Blank" width="600" height="400"></a>
    <div class="desc">Result 2</div>
  </div>
  <div class="result" data-category="oliver feature4 feature5">
    <a target="_blank" href="blank.png"><img src="blank.png" alt="Blank" width="600" height="400"></a>
    <div class="desc">Result 3</div>
  </div>
  <div class="result" data-category="kelowna feature4 feature5 feature1 feature2">
    <a target="_blank" href="blank.png"><img src="blank.png" alt="Blank" width="600" height="400"></a>
    <div class="desc">Result 4</div>
  </div>
  <div class="result" data-category="penticton feature4 feature5 feature3">
    <a target="_blank" href="blank.png"><img src="blank.png" alt="Blank" width="600" height="400"></a>
    <div class="desc">Result 5</div>
  </div>
  <div class="result" data-category="osoyoos feature2 feature3">
    <a target="_blank" href="blank.png"><img src="blank.png" alt="Blank" width="600" height="400"></a>
    <div class="desc">Result 6</div>
  </div>
</div>

希望这是有道理的；我还是一个初学者，所以解释起来有点困难，因为我自己并不完全理解它！谢谢你的帮助。

标签： javascripthtml