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

Question

我只想使用 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>

Answer 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;
})