用户列表组合条件查找与筛选（原生javascript编写）

最新推荐文章于 2024-08-20 09:45:52 发布

sunny前

最新推荐文章于 2024-08-20 09:45:52 发布

阅读量3.8k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/binma2542/article/details/81304445

版权

本文介绍如何利用原生JavaScript实现用户列表的组合条件筛选。通过按钮和输入文字，结合forEach、filter等方法动态更新DOM，实现对数组数据的实时过滤。示例包括单一输入框文本筛选、按钮点击筛选以及多个条件的组合筛选功能。

摘要由CSDN通过智能技术生成

效果：可通过按钮和输入文字进行组合条件筛选

这里使用数组模拟后台数据（可用ajax请求后台数据）：

var person = [
    { name: '王小妹', src: '01pic.jpg', sex: 'male', des: '漂亮的妹子'},
    { name: '金小妹', src: '02pic.jpg', sex: 'male', des: '漂亮的程序媛'},
    { name: '陈小华', src: '07pic.jpg', sex: 'female', des: '相互学习'},
    { name: '马爱国', src: '08pic.jpg', sex: 'female', des: '喜欢猫'},
    { name: '邓小茜', src: '04pic.jpg', sex: 'male', des: '喜欢运动'},
    { name: '马学习', src: '06pic.jpg', sex: 'female', des: '喜欢看书'}
]

主要html结构：