以下の関数を使用すると、ユーザーはデータ属性によって製品をフィルター処理でき、選択した値の配列を作成することで、複数の値によるフィルター処理を同時に行うことができます。いずれかのフィルターに一致するすべての結果を表示する必要があるため、関数をOR
ステートメントで構成しました。checked.filter(".all")
すべての製品を表示する代わりに、そのデータ属性でフィルタリングしないように応答方法を変更するにはどうすればよいですか?
私はここに機能的な例でフィドルを投稿しました: http://jsfiddle.net/chayacooper/hSwcr/1/「スリーブレス」+「レッド」がチェックされている場合、「スリーブレス」または「レッド」のいずれかであるすべてのアイテムが表示されます. ユーザーが「すべての色」をチェックした場合、カラー フィルター( data-color="All"
)を無視し、スタイル フィルター( data-style="Sleeveless"
)のみを適用して、すべてのアイテムではなく 2 つのアイテムを表示します。
var selected = { color: [], style: [] };
$('.filterOptions').on("change", ":checkbox", function (e) {
var type = $(e.delegateTarget).data("type");
var $this = $(this);
var attrValue = $this.data(type);
if ($this.parent().hasClass("active")) {
$this.parent().removeClass("active");
selected[type].splice(selected[type].indexOf(attrValue),1);
}
else {
$this.parent().addClass("active");
selected[type].push(attrValue);
}
var checked = $(":checked", ".filterOptions");
// show all of the available options if...
if (checked.length == 0 || checked.filter(".all").length > 0) {
$('#content').find('*').show();
}
else {
$("#content").find("*").hide();
for (var key in selected) {
$.each(selected[key], function(index,item) {
$('#content').find('[data-' + key + ' *="' + item + '"]').show();
});
}
}
});