0

我是 javascript 的初学者并为学习目的做任务，我试图通过 javascript 数组过滤器方法过滤项目，但问题是每当我单击任何特定类别按钮时，它都会返回 Web 浏览器中的所有项目（不仅是过滤的项目） ，但是如果我尝试控制过滤后的项目，那么它可以完美运行并在控制台中返回过滤后的项目（单击特定类别后，它会返回该特定类别中的所有项目），任何人都可以指出问题吗？我真的很感谢你:) 下面是我的代码 js：

const menu = [{
                id: 1,
                title: "Our First Title",
                category: "love",
                price: 20,
                img: "cup-of-coffee-1280537_640.jpg",
                desc: `This is the short description for teting purpose... This is for first item...!`,

            },

            {
                id: 2,
                title: "Our Second Title",
                category: "love",
                price: 25,
                img: "apple-1868496_640.jpg",
                desc: `This is the short description for teting purpose... This is for Second item...!`,

            },

            {
                id: 3,
                title: "Our Third Title",
                category: "hate",
                price: 50,
                img: "desk-593327_640.jpg",
                desc: `This is the short description for teting purpose... This is for Third item...!`,

            },

        ];





        let filterButtons = document.querySelectorAll('.filterbtn');

        window.addEventListener("DOMContentLoaded", function() {
            // Loading Items 

            filterButtons.forEach(function(btn) {
                // console.log(btn);
                btn.addEventListener("click", function(e) {
                    let category = e.currentTarget.dataset.id;
                    // console.log(category);
                    let menuCategory = menu.filter(function(filters) {
                        if (filters.category === category) {
                            console.log(filters);
                            return filters;
                        }


                    });

                    

                     if (category === 'all') {
                         displayItems(menu);
                         // console.log(category);
                     } else {
                         displayItems(menuCategory);
                     }
                });
            });

            
            function displayItems() {
                let displayMap = menu.map(function(menuItems) {
                    
                    return ` <article class="menu-item">
                <img src="${menuItems.img}" class="photo" alt="menu item">


                <div class="item-info">
                    <header>
                        <h4>${menuItems.title}</h4>
                        <h4 class="price">${menuItems.price}</h4>
                    </header>
                    <p class="item-text">
                        ${menuItems.desc}
                    </p>
                </div>
            </article> `;
                });
                let sectionCenter = document.querySelector('.section-center');
                displayMap = displayMap.join("");
                sectionCenter.innerHTML = displayMap;
            }
        });
4

2 回答 2

0

您调用displayItems(menu)and displayItems(menuCategory)，但您的实际方法不需要任何参数，并且您遍历原始菜单数组。

function displayItems() {
  let displayMap = menu.map(function(menuItems) {...}
}

如果您传递过滤后的数组，则应该使用它，如下所示：

function displayItems(filtered) {
  let displayMap = filtered.map(function(menuItems) {...
}
于 2021-08-12T12:21:51.307 回答
0

该displayItems函数正在渲染菜单数组中的每个元素（查看.map）。您将过滤后的数组作为参数传递，但该函数未使用任何参数。

            function displayItems(array) {
                let displayMap = array.map(function(menuItems) {
                    // etc
于 2021-08-12T12:19:09.570 回答