为了账号安全,请及时绑定邮箱和手机立即绑定

选中多个复选框时筛选数据

选中多个复选框时筛选数据

宝慕林4294392 2022-09-23 16:32:30

目前,在我的应用程序中,用户可以通过键入游戏名称来搜索游戏标题。当他们开始键入结果时,将使用筛选器方法进行更新。我现在尝试使用多个复选框执行相同的操作。因此,当用户检查游戏机和/或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/


查看完整描述

1 回答

?
慕桂英4014372

TA贡献1556条经验 获得超1个赞

要实现两个主要功能:


取消选中类别时将其删除


我建议您使用 Set as ,以便您可以分别通过 和 轻松检查、添加和删除条目。filters.categorieshasadddelete


//onchange event

if (checkbox.checked) {

    filters.categories.add(event.target.value);

} else {

    filters.categories.delete(event.target.value);

}

filterStores(stores, filters);

也根据类别进行过滤stores


将回调修改为帐户:.filter


store.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>


查看完整回答
反对 回复 4天前
  • 1 回答
  • 0 关注
  • 7 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信