多个过滤器同时

Question

我有几个过滤器（复选框和价格过滤器，然后选择选项）。 我希望这些过滤器一起工作。但有一个问题。过滤器单独工作。但是我希望这些过滤器一起工作。

我用过这种方法。分组过滤器可以工作。但是您可以使用自己的方法。

function rangeSlider() {
  $(".range-slider").ionRangeSlider({
    hide_min_max: true,
    keyboard: true,
    min: 0,
    max: 150,
    from: 0,
    to: 140,
    type: 'double',
    step: 1,
    prefix: "$",
    grid: true,
    onFinish: function(data) {
      var _price = filters.findIndex(item => item.field === 'price');
      if (_price != -1) filters[_price]['value'] = [data.from, data.to];
      else addOrRemoveFilter('price', [data.from, data.to], true);
      customFilter();
      // console.log(addOrRemoveFilter('price', [data.from, data.to], true));

    }
  });
}

function customFilter() {
  let filtered_list = [];
  FlyList.filter(item => {
    filters.forEach(function(el, i) {
      let _field = el['field'];
      let _value = el['value'];
      // console.log(_value);



      if (typeof(_value) === 'object' && _value.length) {

        if (parseInt(item[_field]) >= (parseInt(_value[0] * 1000)) && parseInt(item[_field]) <= (parseInt(_value[1] * 1000))) {
          filtered_list.push(item);
        } else {
          FlyList = [];
        }

      } else {
        let isMulti = _value.split(',');

        //RANGE PRICE SLIDER  
        if (isMulti.length > 1) {
          let time = miliseconds(item[_field].split(':')[0], item[_field].split(':')[1])
          let num1 = miliseconds(isMulti[0].split(':')[0], isMulti[0].split(':')[1]);
          let num2 = miliseconds(isMulti[1].split(':')[0], isMulti[1].split(':')[1]);
          if (time >= num1 && time <= num2) filtered_list.push(item);
        } else {
          //end RANGE PRICE SLIDER  
          item[_field] == _value ? filtered_list.push(item) : false;
        }
      }
    })
  });

  function miliseconds(hrs, min) {
    return ((hrs * 60 * 60 + min * 60) * 1000);
  }

  $('#flights').updateDom(filtered_list.length ? filtered_list : FlyList, {
    animate: true,
  });
}




let filterCheckboxes = document.querySelectorAll('.filtersAll');
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;

    addOrRemoveFilter(field, val, e.target.checked);

    customFilter();
  }

}));


document.getElementById('optionAll').addEventListener('change', (e) => {
  e.preventDefault();
  let filterTypeElement = findFilterTypeElement(e.target);
  if (filterTypeElement) {

    let field = filterTypeElement.getAttribute('data-field');
    let val = e.target.value;

    addOrRemoveFilter(field, val, true);

    for (var index = 0; index < e.target.options.length; index++) {
      addOrRemoveFilter(field, e.target.options[index].value, false);
    }

    addOrRemoveFilter(field, val, true);

    customFilter();
  }
})


function addOrRemoveFilter(f, v, add) {
  if (add) {
    filters.push({
      field: f.toLowerCase(),
      value: v
    });
  } else {
    for (let i = 0; i < filters.length; i++) {
      if (filters[i].field === f.toLowerCase() && filters[i].value === v) {
        filters.splice(i, 1);
      }
    }
  }
  // console.log(filters);
}


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