javascript - 如何使我的复选框过滤器具有包容性，而不是独占性
问题描述
目前，这段代码只做了我想做的一半——它正在过滤数据。不幸的是，这与我试图做的相反。
例如，当您单击复选框时，它将向过滤器数组添加一个新过滤器，并且仅显示包含该过滤器数组中所有内容的卡片。因此，如果您要单击“绿色”复选框，则只会显示颜色数组中带有“G”的卡片。如果您之后单击“黑色”，则只会显示颜色数组中带有“G”和“B”的卡片
我正在寻找的行为是相反的。我想以以下方式开始页面：
filterOptions: [
{checked: true, value: "W", name: "White"},
{checked: true, value: "U", name: "Blue"},
{checked: true, value: "B", name: "Black"},
{checked: true, value: "R", name: "Red"},
{checked: true, value: "G", name: "Green"},
{checked: true, value: "KLD", name: "Kaladesh"},
]
我希望这种行为能够显示所有卡片。单击复选框并且“已选中”变为 false 后，它将过滤掉包含该数据的卡片。
我认为需要修改的功能是：
if (this.selectedFilters.length > 0) {
filteredDataByFilters = Object.values(this.filteredData).filter(obj =>
this.selectedFilters.every(val => obj.colors.indexOf(val) >= 0));
this.filteredData = filteredDataByFilters;
}
下面是一个片段，显示了我目前正在使用的内容。
const cards = [
{
"Sluiceway Scorpion": {
"colorIdentity": [
"B",
"G"
],
"colors": [
"B",
"G"
],
"convertedManaCost": 4.0,
"isReserved": false,
"layout": "normal",
"legalities": {
"1v1": "Legal",
"commander": "Legal",
"duel": "Legal",
"legacy": "Legal",
"modern": "Legal",
"pauper": "Legal",
"penny": "Legal",
"vintage": "Legal"
},
"manaCost": "{2}{B}{G}",
"name": "Sluiceway Scorpion",
"power": "2",
"printings": [
"RTR"
],
"rulings": [
{
"date": "2013-04-15",
"text": "Exiling the creature card with scavenge is part of the cost of activating the scavenge ability. Once the ability is activated and the cost is paid, it’s too late to stop the ability from being activated by trying to remove the creature card from the graveyard."
}
],
"subtypes": [
"Scorpion"
],
"supertypes": [],
"text": "Deathtouch (Any amount of damage this deals to a creature is enough to destroy it.)\nScavenge {1}{B}{G} ({1}{B}{G}, Exile this card from your graveyard: Put a number of +1/+1 counters equal to this card's power on target creature. Scavenge only as a sorcery.)",
"toughness": "2",
"type": "Creature — Scorpion",
"types": [
"Creature"
],
"uuid": "7b6dbadf-a6f7-4876-9c3f-44e4a33b2bee"
},
"Tezzeret the Seeker": {
"colorIdentity": [
"U"
],
"colors": [
"U"
],
"convertedManaCost": 5.0,
"isReserved": false,
"layout": "normal",
"legalities": {
"1v1": "Legal",
"commander": "Legal",
"duel": "Legal",
"legacy": "Legal",
"modern": "Legal",
"vintage": "Legal"
},
"loyalty": "4",
"manaCost": "{3}{U}{U}",
"name": "Tezzeret the Seeker",
"printings": [
"ALA",
"DDF",
"MM2"
],
"rulings": [{
"date": "2008-10-01",
"text": "The first ability can target zero, one, or two artifacts. You may activate it with no targets just to put a loyalty counter on Tezzeret."
},
{
"date": "2008-10-01",
"text": "For the second ability, you choose the value of X when you activate it. You don’t look through your library until the ability resolves. (In other words, you can’t look through your library, decide what artifact card you want, and then determine what X is.) You can’t choose an X that’s greater than the number of loyalty counters on Tezzeret."
},
{
"date": "2008-10-01",
"text": "The third ability affects all artifacts you control, including artifacts that are already creatures."
},
{
"date": "2008-10-01",
"text": "The third ability causes artifacts you control to become creatures in addition to their other card types."
},
{
"date": "2009-10-01",
"text": "A noncreature permanent that turns into a creature is subject to the “summoning sickness” rule: It can only attack, and its {T} abilities can only be activated, if its controller has continuously controlled that permanent since the beginning of their most recent turn."
},
{
"date": "2009-10-01",
"text": "The effect from the ability overwrites other effects that set power and/or toughness if and only if those effects existed before the ability resolved. It will not overwrite effects that modify power or toughness (whether from a static ability, counters, or a resolved spell or ability), nor will it overwrite effects that set power and toughness which come into existence after the ability resolves. Effects that switch the creature’s power and toughness are always applied after any other power or toughness changing effects, including this one, regardless of the order in which they are created."
}
],
"starter": true,
"subtypes": [
"Tezzeret"
],
"supertypes": [
"Legendary"
],
"text": "+1: Untap up to two target artifacts.\n−X: Search your library for an artifact card with converted mana cost X or less and put it onto the battlefield. Then shuffle your library.\n−5: Artifacts you control become artifact creatures with base power and toughness 5/5 until end of turn.",
"type": "Legendary Planeswalker — Tezzeret",
"types": [
"Planeswalker"
],
"uuid": "e5250db5-6dfc-46ef-a6f7-198a3e0594cc"
},
}
];
new Vue({
el: '#app',
computed: {
selectedFilters: function() {
let filters = [];
let checkedFilters = this.filterOptions.filter(obj => obj.checked);
checkedFilters.forEach(element => {
filters.push(element.value);
});
return filters;
}
},
data: function() {
return {
filteredData: [],
search: "",
filterOptions: [
{checked: false, value: "W", name: "White"},
{checked: false, value: "U", name: "Blue"},
{checked: false, value: "B", name: "Black"},
{checked: false, value: "R", name: "Red"},
{checked: false, value: "G", name: "Green"},
{checked: false, value: "KLD", name: "Kaladesh"},
]
}
},
methods: {
getFilteredData: function(){
this.filteredData = cards[0];
let filteredDataByFilters = [];
let filteredDataBySearch = [];
if (this.selectedFilters.length > 0) {
filteredDataByFilters = Object.values(this.filteredData).filter(obj =>
this.selectedFilters.every(val => obj.colors.indexOf(val) >= 0)
);
this.filteredData = filteredDataByFilters;
}
// set filters
// if (this.selectedFilters.length > 0) {
// filteredDataByFilters = Object.values(this.filteredData).filter(obj =>
// this.selectedFilters.every(val => obj.printings.indexOf(val) >= 0)
// );
// this.filteredData = filteredDataByFilters;
// }
if (this.search !== "") {
filteredDataBySearch = Object.values(this.filteredData).filter(obj =>
obj.name.toLowerCase().indexOf(this.search.toLowerCase()) >= 0);
this.filteredData = filteredDataBySearch;
}
}
},
mounted() {
this.getFilteredData();
}
});<script src="https://unpkg.com/vue"></script>
<div id="app">
<div class="container-fluid">
<div class="search-wrapper">
<!-- the search bar form -->
<form v-on:submit="getFilteredData">
<div class="form-row">
<div class="col-10">
<input
type="text"
class="form-control"
placeholder="Enter key word ..."
v-model="search"
v-on:keyup="getFilteredData"
>
</div>
<div class="col-2">
<button type="submit" class="btn btn-primary">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
<!-- check boxes -->
<div id="checkboxes">
<div v-for="(filter, index) in filterOptions" :key="index" class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
v-model="filter.checked"
v-on:change="getFilteredData"
>
<label class="form-check-label">{{ filter.name }}</label>
</div>
</div>
</div>
<!-- end of checkboxes -->
<div class="cards-go-here">
<div v-for="(card, index) in filteredData" :key="index">{{card.name}}</div>
</div>
</div>
</div>解决方案
推荐阅读
- c# - 连接尝试失败，因为连接方在一段时间后没有正确响应 - 仅在 aws 服务器中存在问题
- node.js - 使用gql无法连接到数据库Nest js e2e测试
- ms-access - 表单有时会以选项卡式文档的形式打开，有时则不会
- sql-server-2012 - 将数据从 SQL Server 迁移到 dBASE
- javascript - JQuery 将多个子内容附加到父元素
- javascript - 是否可以在不先使用 PHP 将文件存储在我的服务器上的情况下将文件上传到 Dropbox？
- javascript - 如何使用 Javascript 添加 SVG 元素
- single-page-application - 在 aspnetboilerplate 中的状态代码 400 之后是否可以重定向到登录页面？
- excel - 获取今天日期所在季度的第一个星期五
- javascript - JavaScript 函数不工作 iOS（地理位置和汉堡包图标）