时间戳

首页 > 解决方案 > 根据多个复选框条件过滤数组

javascript - 根据多个复选框条件过滤数组

问题描述

我正在建立一个房地产网站，用户可以在其中应用过滤器。我想要的筛选条件之一是该物业是否有阳台、屋顶露台和花园。

因此，当我只选中一个复选框（阳台）时，我想显示所有带有阳台的属性。但是当我选中两个复选框时（例如花园和阳台），我只想渲染具有这些特定品质的属性，即同时具有花园和阳台的属性。

我有一个相当复杂且难以维护的解决方案。目前我只有 3 个复选框，但如果我再添加 5 个呢？代码将变得非常低效，一切都必须重新编码。

这是我的“复杂”解决方案：

var filters = {
 balcony: false,
 garden: false,
 roofTerrace: false
};

const checkboxFilter = plotAreaFilter.filter((item) => {
    // If only Balcony is checked
    if (filters.balcony && !filters.roofTerrace & !filters.garden) {
        if (item.balcony) {
            return true
        }
    }
    // If both Balcony and Roof Terrace is checked
    else if (filters.balcony && filters.roofTerrace & !filters.garden) {
        if (item.balcony && item.roofTerrace) {
            return true
        }
    }
    // If all three Balcony, Roof Terrace and Garden is checked
    else if (filters.balcony && filters.roofTerrace & filters.garden) {
        if (item.balcony && item.roofTerrace && item.garden) {
            return true
        }
    }
    // If only Roof Terrace is checked 
    else if (!filters.balcony && filters.roofTerrace & !filters.garden) {
        if (item.roofTerrace) {
            return true
        }
    }
    // If only Garden is checked
    else if (!filters.balcony && !filters.roofTerrace & filters.garden) {
        if (item.garden) {
            return true
        }
    }

    // If both Roof Terrace and Garden is checked
    else if (!filters.balcony && filters.roofTerrace & filters.garden) {
        if (item.roofTerrace && item.garden) {
            return true
        }
    }

    // If only Balcony and Garden is checked 
    else if (filters.balcony && !filters.roofTerrace & filters.garden) {
        if (item.balcony && item.garden) {
            return true
        }
    } else {
        return true
    }
})
return checkboxFilter;

我真的希望有更好的解决方案

标签： javascriptarraysjavascript-objects

解决方案

您可以获取条目并根据给定值检查所有条目。

var filters = { balcony: false, garden: true, roofTerrace: true },
    wanted = Object.entries(filters), // [['balcony', false], ['garden', true], ['roofTerrace', true]]
    checkboxFilter = plotAreaFilter.filter(item => wanted.every(([k, v]) => item[k] === v));

推荐阅读