我需要在这个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=""属性制作另一个过滤器选项吗？
答案 0 :(得分：0)
我花了一些时间才能做到这一点。这是代码。
// 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;
};