选中多个复选框时筛选数据
目前，在我的应用程序中，用户可以通过键入游戏名称来搜索游戏标题。当他们开始键入结果时，将使用筛选器方法进行更新。我现在尝试使用多个复选框执行相同的操作。因此，当用户检查游戏机和/或Xbox时，例如结果仅显示这些类别中的游戏。当他们取消选中时，结果将使用更新的值刷新。
目前，我已成功为所有复选框创建了更改事件，并将其值推送到 filters.categories 数组。我遇到的问题是我不知道如何将此数组连接到我现有的过滤器方法。我需要以某种方式循环遍历数组，并将当前值与我的存储对象中的 category.name 进行比较，以查看它们是否匹配。这在过滤方法内部可以做到吗？有什么想法我错了吗？
提前致谢。
网页：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<aside>
<ul>
<li>
<label>
<input type="checkbox" value="playstation" class="category-cb">
<span>Playstation</span>
</label>
<li>
<label>
<input type="checkbox" value="xbox" class="category-cb">
<span>Xbox</span>
</label>
</li>
<li>
<label>
<input type="checkbox" value="nintendo" class="category-cb">
<span>Nintendo</span>
</label>
</li>
</li>
</ul>
</aside>
<main>
<input type="text" class="store-search" placeholder="Search">
<ul class="grid"></ul>
</main>
<script src="app.js"></script>
</body>
</html>
这些：
/*----------------------------
data
----------------------------*/
const stores = [{
id: 0,
name: 'The Last Of Us',
studio: 'Naughtydog',
thumbnail: '',
category: {
id: 0,
name: 'Playstation'
},
price: 50.00
}, {
id: 1,
name: 'Animal Crossing',
studio: 'Nintendo',
thumbnail: '',
category: {
id: 1,
name: 'Nintendo'
},
price: 60.00
}, {
id: 2,
name: 'Gears 5',
studio: 'The Coalition',
thumbnail: '',
category: {
id: 2,
name: 'Xbox'
},
https://jsfiddle.net/bjgp0ux4/
宝慕林4294392浏览 112回答 1
1回答
-
慕桂英4014372
要实现两个主要功能：取消选中类别时将其删除我建议您使用 Set as ，以便您可以分别通过 和 轻松检查、添加和删除条目。filters.categorieshasadddelete//onchange eventif (checkbox.checked) { filters.categories.add(event.target.value);} else { filters.categories.delete(event.target.value);}filterStores(stores, filters);也根据类别进行过滤stores将回调修改为帐户：.filterstore.name.toLowerCase().includes(filters.searchText.toLowerCase()) &&filters.categories.has(store.category.name.toLowerCase())此外，要在未选择任何类别时显示全部，请执行以下操作：store.name.toLowerCase().includes(filters.searchText.toLowerCase()) &&( filters.categories.has(store.category.name.toLowerCase()) || filters.categories.size === 0)一起：/*---------------------------- data----------------------------*/const stores = [{ id: 0, name: 'The Last Of Us', studio: 'Naughtydog', thumbnail: '', category: { id: 0, name: 'Playstation' }, price: 50.00}, { id: 1, name: 'Animal Crossing', studio: 'Nintendo', thumbnail: '', category: { id: 1, name: 'Nintendo' }, price: 60.00}, { id: 2, name: 'Gears 5', studio: 'The Coalition', thumbnail: '', category: { id: 2, name: 'Xbox' }, price: 10.00}, { id: 3, name: 'DOOM Eternal', studio: 'id Software', thumbnail: '', category: { id: 3, name: 'Playstation' }, price: 50.00}, { id: 4, name: 'The Legend of Zelda: Link\'s Awakening', studio: 'Grezzo', thumbnail: '', category: { id: 4, name: 'Nintendo' }, price: 35.00}, { id: 5, name: 'Resident Evil 3', studio: 'Capcom', thumbnail: '', category: { id: 5, name: 'Playstation' }, price: 40.00}];let filters = { searchText: '', categories: new Set}/*---------------------------- functions----------------------------*/let filterStores = function (stores, filters) { let filteredStores = stores.filter(store => ( store.name.toLowerCase().includes(filters.searchText.toLowerCase()) && ( filters.categories.has(store.category.name.toLowerCase()) || filters.categories.size === 0 //No selected categories, show all ) )); let grid = document.querySelector('.grid'); grid.innerHTML = ''; filteredStores.forEach(function (store) { let li = document.createElement('li'); li.textContent = store.name; grid.appendChild(li); });}/*---------------------------- events----------------------------*/document.addEventListener('DOMContentLoaded', function () { filterStores(stores, filters); document.querySelector('.store-search').addEventListener('input', function (event) { filters.searchText = event.target.value; filterStores(stores, filters); }); document.querySelectorAll('.category-cb').forEach(function (checkbox) { checkbox.addEventListener('change', function (event) { if (checkbox.checked) { filters.categories.add(event.target.value); } else { filters.categories.delete(event.target.value); } filterStores(stores, filters); }); });});<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <aside> <ul> <li> <label> <input type="checkbox" value="playstation" class="category-cb"> <span>Playstation</span> </label> </li> <li> <label> <input type="checkbox" value="xbox" class="category-cb"> <span>Xbox</span> </label> </li> <li> <label> <input type="checkbox" value="nintendo" class="category-cb"> <span>Nintendo</span> </label> </li> </ul> </aside> <main> <input type="text" class="store-search" placeholder="Search"> <ul class="grid"></ul> </main> <script src="app.js"></script></body></html>您还可以使用数组：/*---------------------------- data----------------------------*/const stores = [{ id: 0, name: 'The Last Of Us', studio: 'Naughtydog', thumbnail: '', category: { id: 0, name: 'Playstation' }, price: 50.00}, { id: 1, name: 'Animal Crossing', studio: 'Nintendo', thumbnail: '', category: { id: 1, name: 'Nintendo' }, price: 60.00}, { id: 2, name: 'Gears 5', studio: 'The Coalition', thumbnail: '', category: { id: 2, name: 'Xbox' }, price: 10.00}, { id: 3, name: 'DOOM Eternal', studio: 'id Software', thumbnail: '', category: { id: 3, name: 'Playstation' }, price: 50.00}, { id: 4, name: 'The Legend of Zelda: Link\'s Awakening', studio: 'Grezzo', thumbnail: '', category: { id: 4, name: 'Nintendo' }, price: 35.00}, { id: 5, name: 'Resident Evil 3', studio: 'Capcom', thumbnail: '', category: { id: 5, name: 'Playstation' }, price: 40.00}];let filters = { searchText: '', categories: []}/*---------------------------- functions----------------------------*/let filterStores = function (stores, filters) { let filteredStores = stores.filter(store => ( store.name.toLowerCase().includes(filters.searchText.toLowerCase()) && ( filters.categories.includes(store.category.name.toLowerCase()) || filters.categories.length === 0 //No selected categories, show all ) )); let grid = document.querySelector('.grid'); grid.innerHTML = ''; filteredStores.forEach(function (store) { let li = document.createElement('li'); li.textContent = store.name; grid.appendChild(li); });}/*---------------------------- events----------------------------*/document.addEventListener('DOMContentLoaded', function () { filterStores(stores, filters); document.querySelector('.store-search').addEventListener('input', function (event) { filters.searchText = event.target.value; filterStores(stores, filters); }); document.querySelectorAll('.category-cb').forEach(function (checkbox) { checkbox.addEventListener('change', function (event) { if (checkbox.checked) { filters.categories.push(event.target.value); } else { filters.categories.splice(filters.categories.indexOf(event.target.value), 1); } filterStores(stores, filters); }); });});<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <aside> <ul> <li> <label> <input type="checkbox" value="playstation" class="category-cb"> <span>Playstation</span> </label> </li> <li> <label> <input type="checkbox" value="xbox" class="category-cb"> <span>Xbox</span> </label> </li> <li> <label> <input type="checkbox" value="nintendo" class="category-cb"> <span>Nintendo</span> </label> </li> </ul> </aside> <main> <input type="text" class="store-search" placeholder="Search"> <ul class="grid"></ul> </main> <script src="app.js"></script></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript