时间戳

首页 > 解决方案 > 选择两个或多个复选框时的所有过滤器项目

javascript - 选择两个或多个复选框时的所有过滤器项目

问题描述

我只想使用 jquery 和 javascript 制作一个带有复选框数组的过滤器。当只选择一个复选框时它工作正常，但是当我选择两个或更多复选框时它不会显示所有 div。你能帮我找出我的错误吗？我想通过过滤器数组进行过滤。我们的数组名称是 FlyList

let FlyList = [{
    "id": "1",
    "Type_ticket": "systemi",
    "Airline": "ata",
    "fly_time": "04:00",
    "Class_type": "Commercial",
  }, {
    "id": "2",
    "Type_ticket": "charteri",
    "Airline": "Air-Tour",
    "fly_time": "08:00",
    "Class_type": "Commercial",
  }, {
    "id": "3",
    "flight_number": "950",
    "Type_ticket": "systemi",
    "Airline": "taban",
    "fly_time": "11:00",
    "Class_type": "Commercial",
    "price": "30000",
    "time": "11:00",
    "capacity": "5",
  },
  {
    "id": "4",
    "Type_ticket": "systemi",
    "Airline": "mahhan",
    "fly_time": "14:00",
    "Class_type": "Economical",
  }, {
    "id": "5",
    "Type_ticket": "charteri",
    "Airline": "kaspian",
    "fly_time": "17:00",
    "Class_type": "Commercial",
  }, {
    "id": "6",
    "Type_ticket": "charteri",
    "Airline": "kaspian",
    "fly_time": "21: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(el) {
  var result = null;
  var parents = getParents(el);

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

function hasClass(element, className) {
  return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}
<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="ata" name="inlineRadioOptions"> آتا
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="Air-Tour" name="inlineRadioOptions"> ایرتور
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="taban" name="inlineRadioOptions"> تابان
            <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" name="inlineRadioOptions">
            04:00-08:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="08:00" name="inlineRadioOptions">
            08:00-11:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="11:00" name="inlineRadioOptions">
            11:00-14:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="14:00" name="inlineRadioOptions">
            14:00-17:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="17:00" name="inlineRadioOptions">
            17:00-21:00
            <div class="indicator"></div>
          </label>
        </li>
        <li>
          <label class="customCheck">
            <input type="checkbox" value="21:00" name="inlineRadioOptions">
            21:00-24:00
            <div class="indicator"></div>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>

获取所有过滤器。当一个过滤器被选为一个组时，我们的盒子。要显示。我使用这种方法。

FilterItems = [
    {"Type_ticket" : "[]"},
    {"Airliner" : "[]"},
    {"fly_time" : "[]"},
    {"Class_type" : "[]"}
];

谢谢您的回答。但它给了我们三个错误。

在此处输入图像描述

标签： javascriptjqueryarraysfilter

解决方案

您有两个错误，1 您没有从 customFilter 返回新数组，2 您没有将其传递给下一个复选框。因此，您需要将 FlyList 保存在临时变量名称中并对其进行过滤并使用函数中的值对其进行更新。

function customFilter(list, field, value){

    return list.filter(item=> {
            if(typeof(filter) === 'Object'){
                value.foreach(val => {
                    if (item[field] === value){
                        return item[field] === value

                    }
                });
            }
            return item[field] === value
        });
}
function checkedInputs() {
    return [...document.querySelectorAll('.customCheck')].filter((c) => c.checked);
}


let filterCheckboxes = document.querySelectorAll('.customCheck');

filterCheckboxes.forEach(checkbox =>checkbox.addEventListener('change' , (e) =>{
    e.preventDefault();
    // you need each checkbox on each change
    var checkboxes = checkedInputs();
    var filteredList = FlyList;
    checkboxes.forEach(checkbox => {
       let filterTypeElement = findFilterTypeElement(checkbox);
       if (filterTypeElement) {
         let field = filterTypeElement.getAttribute('data-field');
         let val = e.target.value;
         console.log(field,val);
         filteredList = customFilter(filteredList, field , val);
       }
    });
}));

推荐阅读