使用Javascript进行高级过滤

Question

我正在尝试使用javascript创建高级过滤器。我遇到问题的地方是，当我选择多个复选框时，我想显示与所有选中复选框标记的项目匹配的结果，而不仅仅是标记有所选复选框的项目。我希望在您选择更多复选框时缩小搜索范围。

例如，我的网站是关于野生动植物造成的损害。如果选择树木损坏和洪水，唯一应该出现的就是海狸。但是，现在你得到任何标记为洪水或树木损坏的东西。

有人可以帮我设置＆＃34;和＆＃34;过滤而不是＆＃34;或＆＃34;过滤这个？另外，有没有办法让按钮清除所有搜索条件？

以下是我的codepen的链接：http://codepen.io/aahmed2/pen/xEBJkL?editors=0010

＆＃13;

＆＃13;

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

  var selectedFilters = {};

  $filterCheckboxes.filter(':checked').each(function() {

    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
    }

    selectedFilters[this.name].push(this.value);
  });

  var $filteredResults = $('.animal');

  $.each(selectedFilters, function(name, filterValues) {
    $filteredResults = $filteredResults.filter(function() {

      var matched = false,
        currentFilterValues = $(this).data('category').split(' ');

      $.each(currentFilterValues, function(_, currentFilterValue) {

        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });
      return matched;

    });
  });

  $('.animal').hide().filter($filteredResults).show();
}

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

＆＃13;

body {
  font-family: 'Arial';
  color: #646464;
}
.animals {
  margin-top: 30px;
}
.animal {
  padding: 15px 20px;
  width: 100%;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.1);
  margin-bottom: 5px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Wildlife Damage</h1>
  <div class="row">
    <div class="col-sm-2">
      <div class="btn btn-default">Clear Filters</div>
    </div>
    <div class="col-sm-2">
      <p><strong>Filter Type of Damage:</strong>
        <br><small>(Select All That Apply)</small>
      </p>
    </div>
    <form>
      <div class="col-sm-2">
        <label>
          <input type="checkbox" value="vehicle-damage" id="vehicle-damage" />Vehicle Damage</label>
        <br>
        <label>
          <input type="checkbox" value="land-damage" id="land-damage" />Land Damage</label>
        <br>
        <label>
          <input type="checkbox" value="tree-damage" id="tree-damage" />Tree Damage</label>
        <br>
        <label>
          <input type="checkbox" value="plant-damage" id="plant-damage" />Plant Damage</label>
        <br>
      </div>
      <div class="col-sm-2">
        <label>
          <input type="checkbox" value="structural-invasion" id="structural-invasion" />Structural Invasions</label>
        <br>
        <label>
          <input type="checkbox" value="flooding" id="flooding" />Flooding</label>
        <br>
        <label>
          <input type="checkbox" value="electrical-damage" id="electrical-damage" />Electrical Damage</label>
        <br>
        <label>
          <input type="checkbox" value="nests" id="nests" />Nests</label>
        <br>
      </div>
      <div class="col-sm-2">
        <label>
          <input type="checkbox" value="holes" id="holes" />Holes</label>
        <br>
        <label>
          <input type="checkbox" value="holes-w-mounds" id="holes-w-mounds" />Holes with Mounds</label>
        <br>
        <label>
          <input type="checkbox" value="bird-egg-loss" id="bird-egg-loss" />Bird and Egg Loss</label>
        <br>
      </div>
    </form>
  </div>

  <div class="animals">
    <div class="animal" data-id="aloe" data-category="structural-invasion">Bats</div>
    <div class="animal" data-category="flooding tree-damage">Beaver</div>
    <div class="animal" data-category="tree-damage plant-damage vehicle-damage">Deer</div>
    <div class="animal" data-category="bird-egg-loss">Feral Cats</div>
    <div class="animal" data-category="structural-invasion">Mice</div>
    <div class="animal" data-category="holes-w-mounds">Moles</div>
    <div class="animal" data-category="structural-invasion land-damage plant-damage bird-egg-loss">Opossum</div>
    <div class="animal" data-category="holes-w-mounds land-damage">Pocket Gopher</div>
    <div class="animal" data-category="plant-damage land-damage holes-w-mounds">Prairie Dogs</div>
    <div class="animal" data-category="plant-damage nests">Rabbits</div>
    <div class="animal" data-category="structural-invasion tree-damage land-damage plant-damage bird-egg-loss">Raccoons</div>
    <div class="animal" data-category="structural-invasion land-damage">Rats</div>
    <div class="animal" data-category="land-damage bird-egg-loss">Skunks</div>
    <div class="animal" data-category="structural-invasion">Garter Snakes</div>
    <div class="animal" data-category="vehicle-damage electrical-damage structural-invasion tree-damage">Squirrels</div>
    <div class="animal" data-category="holes">13-lined Ground Squirrel</div>
    <div class="animal" data-category="plant-damage land-damage">Voles</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个，我删除了一些代码和注释以简洁起见。基本上，对于每个元素，您需要确保找到所有selectedFilters。此示例使用Array.prototype.every()：

＆＃13;

＆＃13;

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

  var selectedFilters = [];

  $filterCheckboxes.filter(':checked').each(function() {
    var v = this.value;
    if (selectedFilters.indexOf(v) === -1) 
        selectedFilters.push(v);
  });
  
  $('.animal')
    .hide()
    .filter( 
       function(_,a) {
          var itemCat = $(a).data('category').split(' ');
          return selectedFilters.every( 
            function(c){
               return itemCat.indexOf(c) > -1;
            })
    })
    .show();

}

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

＆＃13;

body {
  font-family: 'Arial';
  color: #646464;
}
.animals {
  margin-top: 30px;
}
.animal {
  padding: 15px 20px;
  width: 100%;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.1);
  margin-bottom: 5px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Wildlife Damage</h1>
  <div class="row">
    <div class="col-sm-2">
      <div class="btn btn-default">Clear Filters</div>
    </div>
    <div class="col-sm-2">
      <p><strong>Filter Type of Damage:</strong>
        <br><small>(Select All That Apply)</small>
      </p>
    </div>
    <form>
      <div class="col-sm-2">
        <label>
          <input type="checkbox" value="vehicle-damage" id="vehicle-damage" />Vehicle Damage</label>
        <br>
        <label>
          <input type="checkbox" value="land-damage" id="land-damage" />Land Damage</label>
        <br>
        <label>
          <input type="checkbox" value="tree-damage" id="tree-damage" />Tree Damage</label>
        <br>
        <label>
          <input type="checkbox" value="plant-damage" id="plant-damage" />Plant Damage</label>
        <br>
      </div>
      <div class="col-sm-2">
        <label>
          <input type="checkbox" value="structural-invasion" id="structural-invasion" />Structural Invasions</label>
        <br>
        <label>
          <input type="checkbox" value="flooding" id="flooding" />Flooding</label>
        <br>
        <label>
          <input type="checkbox" value="electrical-damage" id="electrical-damage" />Electrical Damage</label>
        <br>
        <label>
          <input type="checkbox" value="nests" id="nests" />Nests</label>
        <br>
      </div>
      <div class="col-sm-2">
        <label>
          <input type="checkbox" value="holes" id="holes" />Holes</label>
        <br>
        <label>
          <input type="checkbox" value="holes-w-mounds" id="holes-w-mounds" />Holes with Mounds</label>
        <br>
        <label>
          <input type="checkbox" value="bird-egg-loss" id="bird-egg-loss" />Bird and Egg Loss</label>
        <br>
      </div>
    </form>
  </div>

  <div class="animals">
    <div class="animal" data-id="aloe" data-category="structural-invasion">Bats</div>
    <div class="animal" data-category="flooding tree-damage">Beaver</div>
    <div class="animal" data-category="tree-damage plant-damage vehicle-damage">Deer</div>
    <div class="animal" data-category="bird-egg-loss">Feral Cats</div>
    <div class="animal" data-category="structural-invasion">Mice</div>
    <div class="animal" data-category="holes-w-mounds">Moles</div>
    <div class="animal" data-category="structural-invasion land-damage plant-damage bird-egg-loss">Opossum</div>
    <div class="animal" data-category="holes-w-mounds land-damage">Pocket Gopher</div>
    <div class="animal" data-category="plant-damage land-damage holes-w-mounds">Prairie Dogs</div>
    <div class="animal" data-category="plant-damage nests">Rabbits</div>
    <div class="animal" data-category="structural-invasion tree-damage land-damage plant-damage bird-egg-loss">Raccoons</div>
    <div class="animal" data-category="structural-invasion land-damage">Rats</div>
    <div class="animal" data-category="land-damage bird-egg-loss">Skunks</div>
    <div class="animal" data-category="structural-invasion">Garter Snakes</div>
    <div class="animal" data-category="vehicle-damage electrical-damage structural-invasion tree-damage">Squirrels</div>
    <div class="animal" data-category="holes">13-lined Ground Squirrel</div>
    <div class="animal" data-category="plant-damage land-damage">Voles</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以filter .animal然后filter $filterCheckboxes

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

var filterFunc = function() {
  $('.animal').hide().filter(function(){
    var cat = $(this).attr('data-category').split(' ');
    return $filterCheckboxes.filter(function(){
      return this.checked && $.inArray(this.value, cat) !== -1;
    }).length;
  }).show();
}

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

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

var filterFunc = function() {
  $('.animal').hide().filter(function(){
    var cat = $(this).attr('data-category').split(' ');
    return $filterCheckboxes.filter(function(){
      return this.checked && $.inArray(this.value, cat) !== -1;
    }).length;
  }).show();
}

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

body {
  font-family: 'Arial';
  color: #646464;
}
.animals {
  margin-top: 30px;
}
.animal {
  padding: 15px 20px;
  width: 100%;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.1);
  margin-bottom: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Wildlife Damage</h1>
  <div class="row">
    <div class="col-sm-2">
      <div class="btn btn-default">Clear Filters</div>
    </div>
    <div class="col-sm-2">
      <p><strong>Filter Type of Damage:</strong>
        <br><small>(Select All That Apply)</small>
      </p>
    </div>
    <form>
      <div class="col-sm-2">
        <label>
          <input type="checkbox" value="vehicle-damage" id="vehicle-damage" />Vehicle Damage</label>
        <br>
        <label>
          <input type="checkbox" value="land-damage" id="land-damage" />Land Damage</label>
        <br>
        <label>
          <input type="checkbox" value="tree-damage" id="tree-damage" />Tree Damage</label>
        <br>
        <label>
          <input type="checkbox" value="plant-damage" id="plant-damage" />Plant Damage</label>
        <br>
      </div>
      <div class="col-sm-2">
        <label>
          <input type="checkbox" value="structural-invasion" id="structural-invasion" />Structural Invasions</label>
        <br>
        <label>
          <input type="checkbox" value="flooding" id="flooding" />Flooding</label>
        <br>
        <label>
          <input type="checkbox" value="electrical-damage" id="electrical-damage" />Electrical Damage</label>
        <br>
        <label>
          <input type="checkbox" value="nests" id="nests" />Nests</label>
        <br>
      </div>
      <div class="col-sm-2">
        <label>
          <input type="checkbox" value="holes" id="holes" />Holes</label>
        <br>
        <label>
          <input type="checkbox" value="holes-w-mounds" id="holes-w-mounds" />Holes with Mounds</label>
        <br>
        <label>
          <input type="checkbox" value="bird-egg-loss" id="bird-egg-loss" />Bird and Egg Loss</label>
        <br>
      </div>
    </form>
  </div>

  <div class="animals">
    <div class="animal" data-id="aloe" data-category="structural-invasion">Bats</div>
    <div class="animal" data-category="flooding tree-damage">Beaver</div>
    <div class="animal" data-category="tree-damage plant-damage vehicle-damage">Deer</div>
    <div class="animal" data-category="bird-egg-loss">Feral Cats</div>
    <div class="animal" data-category="structural-invasion">Mice</div>
    <div class="animal" data-category="holes-w-mounds">Moles</div>
    <div class="animal" data-category="structural-invasion land-damage plant-damage bird-egg-loss">Opossum</div>
    <div class="animal" data-category="holes-w-mounds land-damage">Pocket Gopher</div>
    <div class="animal" data-category="plant-damage land-damage holes-w-mounds">Prairie Dogs</div>
    <div class="animal" data-category="plant-damage nests">Rabbits</div>
    <div class="animal" data-category="structural-invasion tree-damage land-damage plant-damage bird-egg-loss">Raccoons</div>
    <div class="animal" data-category="structural-invasion land-damage">Rats</div>
    <div class="animal" data-category="land-damage bird-egg-loss">Skunks</div>
    <div class="animal" data-category="structural-invasion">Garter Snakes</div>
    <div class="animal" data-category="vehicle-damage electrical-damage structural-invasion tree-damage">Squirrels</div>
    <div class="animal" data-category="holes">13-lined Ground Squirrel</div>
    <div class="animal" data-category="plant-damage land-damage">Voles</div>
  </div>
</div>