shuffle.js 添加 3 个复合过滤器

Question

我需要在这个 shuffle.js 代码中添加第三个复合过滤器，有人可以帮忙吗？

// ES7 will have Array.prototype.includes.
function arrayIncludes(array, value) {
  return array.indexOf(value) !== -1;
}

// Convert an array-like object to a real array.
function toArray(thing) {
  return Array.prototype.slice.call(thing);
}

var Demo = function (element) {
  this.shapes = toArray(document.querySelectorAll('.js-shapes input'));
  this.colors = toArray(document.querySelectorAll('.js-colors button'));

  this.shuffle = new Shuffle(element, {
    easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', // easeOutQuart
    sizer: '.the-sizer',
  });

  this.filters = {
    shapes: [],
    colors: [],
  };

  this._bindEventListeners();
};

/**
 * Bind event listeners for when the filters change.
 */
Demo.prototype._bindEventListeners = function () {
  this._onShapeChange = this._handleShapeChange.bind(this);
  this._onColorChange = this._handleColorChange.bind(this);

  this.shapes.forEach(function (input) {
    input.addEventListener('change', this._onShapeChange);
  }, this);

  this.colors.forEach(function (butt) {
    butt.addEventListener('click', this._onColorChange);
  }, this);
};

/**
 * Get the values of each checked input.
 * @return {Array.<string>}
 */
Demo.prototype._getCurrentShapeFilters = function () {
  return this.shapes.filter(function (input) {
    return input.checked;
  }).map(function (input) {
    return input.value;
  });
};

/**
 * Get the values of each `active` button.
 * @return {Array.<string>}
 */
Demo.prototype._getCurrentColorFilters = function () {
  return this.colors.filter(function (butt) {
    return butt.classList.contains('active');
  }).map(function (butt) {
    return butt.getAttribute('data-value');
  });
};

/**
 * A shape input check state changed, update the current filters and filte.r
 */
Demo.prototype._handleShapeChange = function () {
  this.filters.shapes = this._getCurrentShapeFilters();
  this.filter();
};

/**
 * A color button was clicked. Update filters and display.
 * @param {Event} evt Click event object.
 */
Demo.prototype._handleColorChange = function (evt) {
  var butt = evt.currentTarget;

  // Treat these buttons like radio buttons where only 1 can be selected.
  if (butt.classList.contains('active')) {
    butt.classList.remove('active');
  } else {
    this.colors.forEach(function (bt) {
      bt.classList.remove('active');
    });

    butt.classList.add('active');
  }

  this.filters.colors = this._getCurrentColorFilters();
  this.filter();
};

/**
 * Filter shuffle based on the current state of filters.
 */
Demo.prototype.filter = function () {
  if (this.hasActiveFilters()) {
    this.shuffle.filter(this.itemPassesFilters.bind(this));
  } else {
    this.shuffle.filter(Shuffle.ALL_ITEMS);
  }
};

/**
 * If any of the arrays in the `filters` property have a length of more than zero,
 * that means there is an active filter.
 * @return {boolean}
 */
Demo.prototype.hasActiveFilters = function () {
  return Object.keys(this.filters).some(function (key) {
    return this.filters[key].length > 0;
  }, this);
};

/**
 * Determine whether an element passes the current filters.
 * @param {Element} element Element to test.
 * @return {boolean} Whether it satisfies all current filters.
 */
Demo.prototype.itemPassesFilters = function (element) {
  var shapes = this.filters.shapes;
  var colors = this.filters.colors;
  var shape = element.getAttribute('data-shape');
  var color = element.getAttribute('data-color');

  // If there are active shape filters and this shape is not in that array.
  if (shapes.length > 0 && !arrayIncludes(shapes, shape)) {
    return false;
  }

  // If there are active color filters and this color is not in that array.
  if (colors.length > 0 && !arrayIncludes(colors, color)) {
    return false;
  }

  return true;

这段代码已经按形状和颜色过滤了项目，我还需要按组过滤。

  <div class= "filter-group col-xs-12 filter-options" style="padding:0">
            <div class="col-sm-4 col-xs-12" data-group="full">
                <a>
                    <img src="images/product/one-piece.png" alt=""/>
                </a>
            </div>   
            <div class="col-sm-4 col-xs-12" data-group="top">
                <a>
                    <img src="images/product/top.png" alt=""/>
                </a>
            </div>  
            <div class="col-sm-4 col-xs-12 bottom" data-group="bottom">
                <a>
                    <img src="images/product/bottom.png" alt=""/>
                </a>
            </div>  
            </div>  
        </div>

如果有人点击.filter-options 中的 div，我们可以使用data-group="" 属性创建另一个过滤选项吗？

Answer 1

花了一些时间，但我能够做到这一点。这是代码。

   // ES7 will have Array.prototype.includes.
function arrayIncludes(array, value) {
  return array.indexOf(value) !== -1;
}

// Convert an array-like object to a real array.
function toArray(thing) {
  return Array.prototype.slice.call(thing);
}

var Demo = function (element) {
  this.shapes = toArray(document.querySelectorAll('.js-shapes input'));
  this.colors = toArray(document.querySelectorAll('.js-colors button'));
  this.styles = toArray(document.querySelectorAll('.filter-group div'));

  this.shuffle = new Shuffle(element, {
    easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', // easeOutQuart
    sizer: '.the-sizer',
  });

  this.filters = {
    shapes: [],
    colors: [],
    styles: [],
  };

  this._bindEventListeners();
};

/**
 * Bind event listeners for when the filters change.
 */
Demo.prototype._bindEventListeners = function () {
  this._onShapeChange = this._handleShapeChange.bind(this);
  this._onColorChange = this._handleColorChange.bind(this);
  this._onStyleChange = this._handleStyleChange.bind(this);

  this.shapes.forEach(function (input) {
    input.addEventListener('change', this._onShapeChange);
  }, this);

  this.colors.forEach(function (button) {
    button.addEventListener('click', this._onColorChange);
  }, this);


  this.styles.forEach(function (div) {
    div.addEventListener('click', this._onStyleChange);
  }, this);    

};

/**
 * Get the values of each checked input.
 * @return {Array.<string>}
 */
Demo.prototype._getCurrentShapeFilters = function () {
  return this.shapes.filter(function (input) {
    return input.checked;
  }).map(function (input) {
    return input.value;
  });
};

/**
 * Get the values of each `active` button.
 * @return {Array.<string>}
 */
Demo.prototype._getCurrentColorFilters = function () {
  return this.colors.filter(function (button) {
    return button.classList.contains('active');
  }).map(function (button) {
    return button.getAttribute('data-value');
  });
};


Demo.prototype._getCurrentStyleFilters = function () {
  return this.styles.filter(function (div) {
    return div.classList.contains('active');
  }).map(function (div) {
    return div.getAttribute('data-group');
  });
};



/**
 * A shape input check state changed, update the current filters and filte.r
 */
Demo.prototype._handleShapeChange = function () {
  this.filters.shapes = this._getCurrentShapeFilters();
  this.filter();
};

/**
 * A color button was clicked. Update filters and display.
 * @param {Event} evt Click event object.
 */
Demo.prototype._handleColorChange = function (evt) {
  var button = evt.currentTarget;

  // Treat these buttons like radio buttons where only 1 can be selected.
  if (button.classList.contains('active')) {
    button.classList.remove('active');
  } else {
    this.colors.forEach(function (btn) {
      btn.classList.remove('active');
    });

    button.classList.add('active');
  }

  this.filters.colors = this._getCurrentColorFilters();
  this.filter();
};


Demo.prototype._handleStyleChange = function (ev) {
  var div = ev.currentTarget;

  // Treat these buttons like radio buttons where only 1 can be selected.
  if (div.classList.contains('active')) {
    div.classList.remove('active');
  } else {
    this.colors.forEach(function (dv) {
      //dv.classList.remove('active');
    });

    div.classList.add('active');
  }

  this.filters.styles = this._getCurrentStyleFilters();
  this.filter();
};


/**
 * Filter shuffle based on the current state of filters.
 */
Demo.prototype.filter = function () {
  if (this.hasActiveFilters()) {
    this.shuffle.filter(this.itemPassesFilters.bind(this));
  } else {
    this.shuffle.filter(Shuffle.ALL_ITEMS);
  }
};

/**
 * If any of the arrays in the `filters` property have a length of more than zero,
 * that means there is an active filter.
 * @return {boolean}
 */
Demo.prototype.hasActiveFilters = function () {
  return Object.keys(this.filters).some(function (key) {
    return this.filters[key].length > 0;
  }, this);
};

/**
 * Determine whether an element passes the current filters.
 * @param {Element} element Element to test.
 * @return {boolean} Whether it satisfies all current filters.
 */
Demo.prototype.itemPassesFilters = function (element) {
  var shapes = this.filters.shapes;
  var colors = this.filters.colors;
  var styles = this.filters.styles;
  var shape = element.getAttribute('data-shape');
  var color = element.getAttribute('data-color');
  var style = element.getAttribute('data-groups');

  // If there are active shape filters and this shape is not in that array.
  if (shapes.length > 0 && !arrayIncludes(shapes, shape)) {
    return false;
  }

  // If there are active color filters and this color is not in that array.
  if (colors.length > 0 && !arrayIncludes(colors, color)) {
    return false;
  }

 // If there are active color filters and this color is not in that array.
  if (styles.length > 0 && !arrayIncludes(styles, style)) {
    return false;
  }


  return true;
};