Question

我正在使用复选框过滤我的JSON内容。下面的代码有效，除了我需要更改逻辑。目前，如果您选中一个复选框并点击提交，则会显示所有具有该值“Y”的项目。现在的问题是，如果您选择多个复选框并点击提交，而不是显示例如“有机”和“无bpa”的所有内容，则它仅显示两个值均为“Y”的项目。因此，当检查两者时，对于有机物和无bpa物品，物品必须具有“Y”。如果一个人有“Y”但没有另一个，那么它就不会显示另一个项目。我怎样才能使所有产品过滤而不仅仅是显示符合标准的项目？这有意义吗？基本上我只想显示所有具有“Y”的内容，该“Y”与要显示的复选框中选择的内容相匹配。我在下面列了一个样本谢谢！

JS Fiddle

 var sampleItems = [{
  name : "All",
  gmoFree : 'Y',
  bpaFree : 'Y',
  glutenFree : 'Y',
  lowSodium : 'Y',
  kosherSym : 'Y',
  organic : 'Y'
}, {
  name : "None",
  gmoFree : 'N',
  bpaFree : 'N',
  glutenFree : 'N',
  lowSodium : 'N',
  kosherSym : 'N',
  organic : 'N'
}, {
  name : "GMO and Gluten Free",
  gmoFree : 'Y',
  bpaFree : 'N',
  glutenFree : 'Y',
  lowSodium : 'N',
  kosherSym : 'N',
  organic : 'N'
}];

$('#submitFilter').click(function() {
var availableFilters = [];
  var activeFilters = [];
  var $filters = $('.filters').each(function() {
    var value = $(this).val();
    availableFilters.push(value);
    if ($(this).is(':checked')) {
      activeFilters.push(value);
    }
  });
  var filteredItems = sampleItems.filter(function(item) {
    return availableFilters.every(function(filter) {
      if (activeFilters.indexOf(filter) > -1) {
        return item[filter] === 'Y';
      }
      return true;
    });
  });
  var $list = $('#list').empty();
  $.each(filteredItems, function(index, item) {
    $list.append($('<LI>').text(JSON.stringify(item)));
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
  <div class="checkbox">
    <label><input type="checkbox" class="filters"
                  name="filter-gulten" value="glutenFree">Gluten Free</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" class="filters"
                  name="filter-non-gmo" value="gmoFree">Non-GMO</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" class="filters"
                  name="filter-organic" value="organic">Organic</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" class="filters"
                  name="filter-low-sodium" value="lowSodium">Low Sodium</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" class="filters"
                  name="filter-bpa-free" value="bpaFree">BPA Free</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" class="filters"
                  name="filter-kosher"  value="kosherSym">Kosher</label>
  </div>
  <button type="button" id="submitFilter" class="btn btn-primary">Submit</button>
  <button type="button" id="clearFilter" class="btn btn-primary">Clear</button>
</form>
<h2>Results</h2>
<ul id="list"></ul>

Answer 1

刚从你的小提琴改变了一小部分javascript代码：

$('#submitFilter').click(function() {
  var availableFilters = [];
  var activeFilters = [];
  var $filters = $('.filters').each(function() {
    var value = $(this).val();
    availableFilters.push(value);
    if ($(this).is(':checked')) {
      activeFilters.push(value);
    }
  });
  var filteredItems = sampleItems.filter(function(item) {
    // Changed here *************
    if (!activeFilters.length) return true;
    for (var i = 0; i < activeFilters.length; i++) {
      if(item[activeFilters[i]] === 'Y') return true;
    }
    return false;
    // to here *************
  });
  var $list = $('#list').empty();
  $.each(filteredItems, function(index, item) {
    $list.append($('<LI>').text(JSON.stringify(item)));
  });
});

步骤摘要：

如果没有过滤器，则返回true
检查每个过滤器，如果匹配则返回true
如果没有匹配的过滤器，则返回false

需要更改JSON

1 个答案: