带有选中复选框和多个过滤器的过滤器项目答案

【问题标题】：filter item with checked checkbox and Multiple filters带有选中复选框和多个过滤器的过滤器项目
【发布时间】：2019-02-03 08:49:02
【问题描述】：

我只想使用 jquery 和 javascript 制作一个带有复选框数组的过滤器。我们的过滤器在组模式下不起作用。如果我们使用多个过滤器，过滤器将不起作用。你能帮我找出我的错误吗？我想过滤数组。我们数组的名称是 FlyList。我想单击几个复选框。为我们进行多重过滤。

let FlyList = [{
    id: "1",
    Airline_number: "961",
    Type_ticket: "systemi",
    Airline: "dubai",
    fly_time: "04:00-08:00",
    Class_type: "Economical"
  },
  {
    id: "2",
    Airline_number: "962",
    Type_ticket: "charteri",
    Airline: "frans",
    fly_time: "08:00-11:00",
    Class_type: "Commercial"
  },
  {
    id: "3",
    Airline_number: "963",
    Type_ticket: "systemi",
    Airline: "Emirates",
    fly_time: "11:00-14:00",
    Class_type: "Commercial"
  },
  {
    id: "4",
    Airline_number: "964",
    Type_ticket: "systemi",
    Airline: "Emirates",
    fly_time: "14:00-17:00",
    Class_type: "Economical"
  },
  {
    id: "5",
    Airline_number: "965",
    Type_ticket: "charteri",
    Airline: "dubai",
    fly_time: "17:00-21:00",
    Class_type: "Commercial"
  },
  {
    id: "6",
    Airline_number: "966",
    Type_ticket: "charteri",
    Airline: "frans",
    fly_time: "21:00-24:00",
    Class_type: "Economical"
  }
];

function customFilter(list, field, value) {

  let fill = list.filter(item => {
    if (typeof(filter) === 'Object') {
      value.foreach(val => {
        if (item[field] === value) {
          return item[field] === value
        }
      });
    }
    return item[field] === value
  });
  console.log(fill);
}

let filterCheckboxes = document.querySelectorAll('.customCheck');
filterCheckboxes.forEach(checkbox => checkbox.addEventListener('change', (e) => {
  e.preventDefault();
  let filterTypeElement = findFilterTypeElement(e.target);
  if (filterTypeElement) {
    let field = filterTypeElement.getAttribute('data-field');
    let val = e.target.value;
    console.log(field, val);
    customFilter(FlyList, field, val);
  }
}));

function getParents(el, parentSelector /* optional */ ) {

  // If no parentSelector defined will bubble up all the way to *document*
  if (parentSelector === undefined) {
    parentSelector = document;
  }

  var parents = [];
  var p = el.parentNode;

  while (p && (p !== parentSelector || p.parentNode)) {
    var o = p;
    parents.push(o);
    p = o.parentNode;
  }
  parents.push(parentSelector); // Push that parentSelector you wanted to stop at
  return parents;
}

function findFilterTypeElement(element, className) {
  let result = null;
  let parents = getParents(el);

  parents.forEach((item) => {
    if (hasClass(item, 'filter_type') && result == null) {
      result == null;
    }
  });
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="filters">
  <div class="collapse show" id="collapseFilters">
    <div class="filter_type" data-field="Type_ticket">
      <h6>
        Type of ticket
        <div class="switcher float-left ">
          <label class="customToggle small">
            <input type="checkbox" name="" id="" class="selectall" />
            all Type of ticket
            <div class="indicator"></div>
          </label>
        </div>
      </h6>
      <ul>
        <li>
          <label class="customCheck w-100 " id="filter-check">
            <input type="checkbox" name="" value="systemi" class="individual" />
            systemi
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck w-100" id="filter-check2">
            <input
              type="checkbox"
              name=""
              value="charteri"
              class="individual"
            />
            charteri
            <div class="indicator"></div>
          </label>
        </li>
      </ul>
    </div>
    <div class="filter_type airlineSelection" data-field="Airline">
      <h6>
        airline
        <div class="switcher float-left">
          <label class="customToggle small">
            <input type="checkbox" name="" id="" />
            all airline
            <div class="indicator"></div>
          </label>
        </div>
      </h6>
      <ul>
        <li>
          <label class="customCheck" id="">
            <input type="checkbox" value="frans" name="inlineRadioOptions" />
            frans
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" name="inlineRadioOptions" /> dubai
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="emirates" name="inlineRadioOptions" />
            emirates
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="frans" name="inlineRadioOptions" />
            frans
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="emirates" name="inlineRadioOptions" />
            emirates
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="dubai" name="inlineRadioOptions" />
            dubai
            <div class="indicator"></div>
          </label>
        </li>
      </ul>
    </div>

    <div class="filter_type" data-field="Class_type">
      <h6>
        Class_type
        <div class="switcher float-left">
          <label class="customToggle small">
            <input type="checkbox" name="" id="" />
            all Class_type
            <div class="indicator"></div>
          </label>
        </div>
      </h6>
      <ul>
        <li>
          <label class="customCheck" id="">
            <input
              type="checkbox"
              value="economical"
              name="inlineRadioOptions"
            />
            economical
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="commercial"
              name="inlineRadioOptions"
            />
            commercial
            <div class="indicator"></div>
          </label>
        </li>
      </ul>
    </div>
    <div class="filter_type" data-field="fly_time">
      <h6>
        fly_time
        <div class="switcher float-left">
          <label class="customToggle small">
            <input type="checkbox" name="" id="" />
            all fly_time
            <div class="indicator"></div>
          </label>
        </div>
      </h6>
      <ul>
        <li>
          <label class="customCheck" id="">
            <input
              type="checkbox"
              value="04:00-08:00"
              name="inlineRadioOptions"
            />
            04:00-08:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="08:00-11:00"
              name="inlineRadioOptions"
            />
            08:00-11:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="11:00-14:00"
              name="inlineRadioOptions"
            />
            11:00-14:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="14:00-17:00"
              name="inlineRadioOptions"
            />
            14:00-17:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="17:00-21:00"
              name="inlineRadioOptions"
            />
            17:00-21:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input
              type="checkbox"
              value="21:00-24:00"
              name="inlineRadioOptions"
            />
            21:00-24:00
            <div class="indicator"></div>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>

【问题讨论】：

customFilter 里面，if(typeof(filter) === 'Object') 是干什么用的？ filter 这里是什么？
list.filter 表示 FlyList.filter
if(typeof(filter) === 'Object') 行有什么作用？任何地方都没有filter 变量。
另外，1) sn-p 中缺少hasClass 函数。 2) 在findFilterTypeElement 内，代码应为let parents = getParents(element);
同时选择多个过滤器。我们必须在这里做一些改变。 let filterCheckboxes = document.querySelectorAll('.customCheck'); filterCheckboxes.forEach (checkbox => checkbox.addEventListener ('change', (e) => { e.preventDefault (); let filterTypeElement = findFilterTypeElement (e.target); if (filterTypeElement) { let field = filterTypeElement.getAttribute (' data-field'); let val = e.target.value; console.log (field, hour); customFilter (FlyList, field, hour); } }));

标签： javascript jquery arrays filter

【解决方案1】：

在这里使用 array.forEach 是不合适的。一旦启用过滤器部分并失败，该项目将被排除，您需要跳出循环。

这里是一个方法的大纲

function isEnabled(filterGroup){
  // todo check DOM for checked
}

function passes(filterGroup, item){
  return filterGroup.items.every(filterItem=>{
     // todo return true if item passes filterItem
  }
}

let itemsFiltered = itemsAll.filter(item=> {
   let pass=true
    for(let filterGroup of filterGroups) {
      if(isEnabled(filterGroup) && !passes(filterGroup, item)) {
          pass=false;
          break;
      }
    }
   return pass;
})

【讨论】：

删除（让填充）代码。我会用你的代码代替吗？
当我点击复选框时。与复选框关联的数组已为我过滤。但我想要。使用几个复选框返回一个数组（使用多个过滤器返回一个框）。这意味着使用多个过滤器返回一个数组。
只有当组中的所有复选框都与项目匹配时，filter.passes 函数才会返回 true。
谢谢。我的这部分代码有效。我想通过更改部分（filterCheckboxes.forEach）来做到这一点。
如果您能提供帮助，请通过更改此部分来更正此代码。