在按钮的点击事件处理程序中,检查过滤条件并正确过滤数组。示例代码如下:
const data = [
{ name: 'John', age: 28 },
{ name: 'Jane', age: 25 },
{ name: 'Bob', age: 32 }
];
const filterData = (filter) => {
const filtered = data.filter(item => {
// 根据过滤条件过滤数据
return item.age >= filter.minAge && item.age <= filter.maxAge;
});
// 更新界面上的数据显示
displayData(filtered);
};
// 绑定按钮点击事件
const btnFilter = document.getElementById('btnFilter');
btnFilter.addEventListener('click', () => {
// 获取用户输入,构建过滤条件
const filter = {
minAge: Number(document.getElementById('txtMinAge').value),
maxAge: Number(document.getElementById('txtMaxAge').value)
};
// 过滤数据
filterData(filter);
});
在上述示例中,我们定义了一个 filterData
函数,可以根据过滤条件过滤数组。在按钮的点击事件处理程序中,获取用户输入构建过滤条件,然后调用 filterData
函数过滤数据。最后,更新界面上的数据显示。