Question

我正在尝试构建一个基于某些复选框显示对象的通用过滤器模块。到目前为止，我能够在其他stackoverflow成员的帮助下构建颜色部分。当选中或取消选中颜色复选框时，它会显示所需的对象。现在我想能够根据它们的尺寸显示所需的物体，但我找不到它的任何条件。阅读代码中的评论。

＆＃13;

var DATABASE = [
    {id:0, color:'green',  size:'L',   collarType:'regular',  cap:false, sleeves:'short', price: 35,   availability: true},
    {id:1, color:'red',    size:'XL',  collarType:'scoop',    cap:false, sleeves:'long',  price: 40,   availability: false},
    {id:2, color:'blue',   size:'M',   collarType:'turtle',   cap:false, sleeves:'3/4',   price: 45,   availability: true},
    {id:3, color:'red',    size:'XXL', collarType:'scoop',    cap:true,  sleeves:'3/4',   price: 25,   availability: false},
    {id:4, color:'red',    size:'L',   collarType:'regular',  cap:true,  sleeves:'short', price: 40,   availability: true},
    {id:5, color:'green',  size:'S',   collarType:'regular',  cap:false, sleeves:'short', price: 70,   availability: false},
    {id:6, color:'yellow', size:'L',   collarType:'v-neck',   cap:true,  sleeves:'short', price: 25,   availability: true}
];
var selection = DATABASE;

document.addEventListener('DOMContentLoaded', function() {

  const mainContent = document.querySelector('main');

  // COLOR CHECKBOXES
  const chbBlueColor = document.querySelector('#blue-color-filter');
  const chbRedColor = document.querySelector('#red-color-filter');
  const chbGreenColor = document.querySelector('#green-color-filter');
  const chbYellowColor = document.querySelector('#yellow-color-filter');

  // SIZE CHECKBOXES
  const chbXxlSize = document.querySelector('#size-xxl');

  function applyFilter() {

    function filterFn(obj) {
      return (chbBlueColor.checked || obj.color !== "blue") &&
        (chbRedColor.checked || obj.color !== "red") &&
        (chbGreenColor.checked || obj.color !== "green") &&
        (chbYellowColor.checked || obj.color !== "yellow")
        // if 2XL checkbox is checked and no other checkboxes are checked, show all available objects that has a size property = XXL
        // if some other checkboxes are already checked, show objects that has a size property = XXL based on those checked items
    }

    selection = DATABASE.filter(filterFn);

    mainContent.innerHTML = JSON.stringify(selection);

  }


  // COLOR EVENT LISTENERS
  chbBlueColor.addEventListener('change', applyFilter);
  chbRedColor.addEventListener('change', applyFilter);
  chbGreenColor.addEventListener('change', applyFilter);
  chbYellowColor.addEventListener('change', applyFilter);

  // SIZE EVENT LISTENERS
  chbXxlSize.addEventListener('change', applyFilter);
});

＆＃13;

section > div {
  margin: 5px;
  padding: 10px;
  display: inline-block;
  background-color: #e4e4e4;
}
H4 {
  border-bottom: 1px solid;
}
label {
  font-size: 14px;
}

＆＃13;

<body>
  <section>
    <div class="color-filter">
      <H4>COLOR</H4>
      <input type="checkbox" id="all-colors">
      <label for="all-colors">All</label>
      <input type="checkbox" id="blue-color-filter">
      <label for="blue-color-filter">Blue</label>
      <input type="checkbox" id="red-color-filter">
      <label for="red-color-filter">Red</label>
      <input type="checkbox" id="green-color-filter">
      <label for="green-color-filter">Green</label>
      <input type="checkbox" id="yellow-color-filter">
      <label for="yellow-color-filter">Yellow</label>
    </div>

    <div class="size-filter">
      <H4>SIZE</H4>
      <input type="checkbox" id="all-sizes">
      <label for="all-sizes">All</label>
      <input type="checkbox" id="size-xxl">
      <label for="size-xxl">2XL</label>
      <input type="checkbox" id="size-xl">
      <label for="size-xl">XL</label>
      <input type="checkbox" id="size-l">
      <label for="size-l">L</label>
      <input type="checkbox" id="size-m">
      <label for="size-m">M</label>
      <input type="checkbox" id="size-s">
      <label for="size-s">S</label>
    </div>

    <div class="collar-and-cap-filter">
      <div class="collar-filter">
        <h4>COLLAR</h4>
        <input type="checkbox" id="all-collars">
        <label for="all-collars">All</label>
        <input type="checkbox" id="collar-regular">
        <label for="collar-regular">Regular</label>
        <input type="checkbox" id="collar-scoop">
        <label for="collar-scoop">Scoop</label>
        <input type="checkbox" id="collar-turtle">
        <label for="collar-turtle">Turtle</label>
        <input type="checkbox" id="collar-vneck">
        <label for="collar-vneck">V-neck</label>
      </div>
      <div class="cap-filter">
        <input type="checkbox" id="all-caps">
        <label for="all-caps">All</label>
        <input type="checkbox" id="cap available">
        <label for="cap available">Cap</label>
        <input type="checkbox" id="cap-unavailable">
        <label for="cap-unavailable">No cap</label>
      </div>
    </div>

    <div class="availability-filter">
      <input type="checkbox" id="availability">
      <label for="availability">Only Available Products</label>
    </div>
  </section>
</body>

＆＃13;

Answer 1

如果你理解你为颜色问题做了什么，那么对于其他问题它基本上是相同的：我理解你想要一个与所检查的每个选项相对应的选择。

尝试调整为颜色创建的过滤器，然后将其应用于选择（而不是DATABASE），这样，您将过滤已经过颜色过滤的大小对象（因此它们将匹配两个选项））。

（你可以注意到这里的顺序并不重要，除了一个非常大的数据库：你会尝试做一些预测，哪个选项会消除更多的对象并首先过滤这些选项）

寻找过滤对象数组的条件

1 个答案: