友情提示：gif图太小，可以ctrl 加 +键 放大

 成品如下：

开始搭建 html  和  css

html代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <!-- 格式化css默认样式 -->
  10.     <link rel="stylesheet" href="./css/css-comment.css">
  11.     <!-- 搭建好基本样式 -->
  12.     <link rel="stylesheet" href="./css/筛选小demo.css">
  13. </head>
  14.  
  15. <body>
  16.     <div class="wra">
  17.         <div class="wraTop">
  18.             <input type="text">
  19.             <div class="sex">
  20.                 <span class="btn" id="m">Male</span>
  21.                 <span class="btn" id="f">Female</span>
  22.                 <span class="btn default" id="a">All</span>
  23.             </div>
  24.             <div class="age">
  25.             </div>
  26.         </div>
  27.         <div class="wraBottom">
  28.             <ul>
  29.                 <li>
  30.                     <img src="./img/head.jpg">
  31.                     <p class="name">王小明</p>
  32.                     <span>18岁</span>
  33.                     <p class="des">成绩很好</p>
  34.                 </li>
  35.                 <li>
  36.                     <img src="./img/head.jpg">
  37.                     <p class="name">王小明</p>
  38.                     <span>18岁</span>
  39.                     <p class="des">成绩很好</p>
  40.                 </li>
  41.                 <li>
  42.                     <img src="./img/head.jpg">
  43.                     <p class="name">王小明</p>
  44.                     <span>18岁</span>
  45.                     <p class="des">成绩很好</p>
  46.                 </li>
  47.                 <li>
  48.                     <img src="./img/head.jpg">
  49.                     <p class="name">王小明</p>
  50.                     <span>18岁</span>
  51.                     <p class="des">成绩很好</p>
  52.                 </li>
  53.                 <li>
  54.                     <img src="./img/head.jpg">
  55.                     <p class="name">王小明</p>
  56.                     <span>18岁</span>
  57.                     <p class="des">成绩很好</p>
  58.                 </li>
  59.             </ul>
  60.         </div>
  61.     </div>
  62. </body>
  63.  
  64. </html>

css代码如下：

  1. .wra {
  2.     width: 500px;
  3.     margin: 100px  auto 0px;
  4.     border: 1px solid #d7d7d7;
  5.     padding: 10px 15px;
  6.     border-radius: 5px;
  7. }
  8.  
  9. .wra .wraTop{
  10.     margin-top: 10px;
  11.     margin-bottom: 10px;
  12. }
  13. .wra .wraTop input{
  14.     width: 240px;
  15.     height: 20px;
  16.     outline: none;
  17.     border:1px solid #d7d7d7;
  18.     padding-left: 10px;
  19.     border-radius: 5px;
  20. }
  21.  
  22. .wra .wraTop .sex{
  23.    display:inline-block;
  24. }
  25.  
  26. .wra .wraTop .btn{
  27.     display: inline-block;
  28.     height: 18px;
  29.     margin-left: 10px;
  30.     cursor:pointer;
  31.     line-height:18px;
  32.     padding: 1px 2px;
  33.     border-radius: 2px;
  34. }
  35.  
  36. .wra .wraTop .btn.default{
  37.     color: #fff;
  38.     background-color: rgb(77, 199, 247);
  39. }
  40.  
  41. /* bottom */
  42.  
  43. .wra .wraBottom ul li{
  44.     position: relative;
  45.     margin-bottom:15px;
  46.     border-bottom: 1px solid rgb(245, 242, 242);
  47.     padding: 10px 0px 10px 50px;
  48. }
  49. .wra .wraBottom ul li img{
  50.     position: absolute;
  51.     top: 10px;
  52.     left: 0px;
  53.     width: 40px;
  54.     height: 40px;
  55. }
  56.  
  57. .wra .wraBottom ul li span{
  58.     display: inline-block;
  59.     margin: 5px 0;
  60. }
  61.  
  62. .wra .wraBottom ul li .des{
  63.     color: rgb(228, 95, 95);
  64.     font-size: 10px;
  65. }

搭建好的效果：

先把html ul 标签里面的全部代码删除，再利用js代码构建。

js 代码如下

  1. var arr = [ //模拟后台给的数据
  2.     { name: "王小明", src: "./img/head.jpg", des: "成绩很好", sex: "m", age: 18 },
  3.     { name: "王大海", src: "./img/head.jpg", des: "长得帅", sex: "m", age: 19 },
  4.     { name: "刘小红", src: "./img/head.jpg", des: "莫名的喜感", sex: "f", age: 17 },
  5.     { name: "孙小白", src: "./img/head.jpg", des: "一白遮三丑", sex: "f", age: 16 },
  6.     { name: "刘小黑", src: "./img/head.jpg", des: "成绩很好", sex: "m", age: 20 }
  7. ];
  8. var wra = document.getElementsByClassName("wra")[0];
  9. var wb = wra.getElementsByClassName("wraBottom")[0];
  10. var oUl = wb.getElementsByTagName("ul")[0];
  11. var sex = document.getElementsByClassName('sex')[0];
  12. var sexbtn = sex.getElementsByClassName("btn");
  13. var inp = wra.getElementsByTagName("input")[0];
  14.  
  15. //创建全局默认值，记录每一次事件触发的数值
  16. var state = {
  17.     text: '',
  18.     sex: 'a'
  19. }
  20.  
  21. // 渲染页面
  22. function renderPage(data) {
  23.     oUl.innerHTML = "";
  24.     data.forEach(function (ele, index, self) {
  25.         //遍历数组里面的东西，取其中数据构建html结构，
  26.         oUl.innerHTML += '<li><img src=' + ele.src + '><p class="name">' + ele.name + '</p><span>' + ele.age + '岁</span><p class="des">' + ele.des + '</p></li>';
  27.     });
  28. }
  29. renderPage(arr);
  30.  
  31. //绑定性别点击事件
  32. var lastDefault = sexbtn[2]; //默认性别选项All
  33. for(var i = 0; i < sexbtn.length; i++){
  34.     (function(j){
  35.         sexbtn[j].onclick = function(){
  36.             sexbtn[j].className = "btn default";//点击时，给点击的按钮添加 css样式(default)
  37.             lastDefault.className = "btn";// 赋给样式后，取消上一个btn的样式
  38.             lastDefault = sexbtn[j];//赋给样式后，此次点击的btn 就成了过去
  39.  
  40.             state.sex = sexbtn[j].id;
  41.             var newArr = screenSex(arr, state.sex); //筛选性别执行后返回新数组
  42.             renderPage( screenInput(newArr, state.text));//利用新数组再次筛选搜索框，筛选后渲染页面
  43.         }
  44.     })(i)
  45. }
  46. // 筛选性别函数
  47. function screenSex(data, sex) {
  48.     if (sex == "a") { //判断输入的值是否为默认值a，如果是，不用筛选，直接返回原数组
  49.         return data;
  50.     } else {
  51.         return data.filter(function (ele, index, self) {//利用数组方法filter过滤，不懂filter方法，请看本人另外笔记filter方法
  52.             return sex == ele.sex;
  53.             //第一遍循环，查看 数组第一个数据里面的 sex 是否等于 传进来的sex  如果是，返回这条数据到新数组
  54.             //{ name: "王小明", src: "./img/head.jpg", des: "成绩很好", sex: "m", age: 18 }
  55.         })
  56.     }
  57. }
  58.  
  59. //触发input事件
  60. inp.oninput = function(){
  61.     state.text = this.value;//记录当前输入的字
  62.     var newArr = screenInput(arr, state.text);//筛选搜索框输入的值，执行后返回新数组
  63.     renderPage( screenSex(newArr, state.sex));//利用新数组再次筛选性别，筛选后渲染页面
  64.  
  65. }
  66. //筛选搜索框函数
  67. function screenInput(data, value){
  68.     if(!value){//判断输入的值是否为默认值''，如果是，不用过滤，直接返回原数组
  69.         return data;
  70.     }else{
  71.       return data.filter(function(ele, index, self){
  72.            return ele.name.indexOf(value) >= 0;
  73.             //字符串方法，indexOf 查看value这个字符串，是否存在于ele.name中，如果存在返回大于0的索引(true)
  74.             //如果不存在，返回-1，(false)
  75.             //如果返回(true)，返回这条数据到新数组中
  76.        })
  77.     }
  78. }

此功能已经完成，如果除了筛选性别和筛选输入之外有新的行为，代码会越来越冗余，加入设计思想，管理行为，

全局默认值是裸露的，谁都可以修改它。封装全局默认值。

首先，创建空文件夹专门放行为，抽出行为(筛选搜索框函数 和 筛选性别的函数)，创建单独文件。

创建store.js文件，用来管理全局默认值，添加以下代码。

现在编辑store.js文件 的dispatch函数，咋们希望的是，触发事件的时候，获取触发的那个数值，传入dispatch函数就可以修改全局的默认值(记得引入文件哦)

接下来合并我们的筛选函数，创建combineFilter.js文件

  1. //此方法用于执行执行screenInput 和 screenSex函数
  2. function combineFilter(comfig){
  3.     return function (data){ //这里data的值，是通过调用lastFilterArr(这里传入的)
  4.  
  5.         for(var i in comfig){
  6.             data = comfig[i](data, store.getState(i))//要拿到input触发事件的value，只能通过store.getState方法取，此时的i为text
  7.  
  8.             //第一圈循环相当于 取出screenInput函数传入数据执行(data, store.getState(i))执行后的结果data接收
  9.  
  10.             //data 接收screenInput过滤后的新数组，等待第二次循环
  11.             //第二次循环 轮到screenSex 函数， 此时 传入的data是screenInput过滤好后的数组，这样就达到了 双层过滤；
  12.         }
  13.         return data;
  14.     }
  15. }
  16.  
  17. var lastFilterArr = combineFilter({
  18.     text: screenInput, //这两个函数，是我们抽出来的行为，
  19.     sex: screenSex
  20.      //这里传入的值  combineFilter(comfig)  接收
  21. })

最后一步，实现我们store.subscribe方法   用我们上一步实现好的 combineFilter.js文件里面的  lastFilterArr() 方法

lastFilterArr(arr) 放入我们要过滤的数组， 通过 screenInput   screenSex 这两个函数循环过滤，过滤后 用renderPage 渲染页面，把这些放入

store.subscribe方法中，当我们触发事件的时候，通过dispatch修改 值的时候， 自动触发subscribe方法

最后 加上防抖功能

  1. function debounce(handler, delay) {
  2.     var timer = null;
  3.     return function () {
  4.         var _self = this,
  5.             _arg = arguments;
　　　　　　clearTimeout(timer);
  1.         timer = setTimeout(function () {
  1.             handler.apply(_self, _arg);
  2.         }, delay)
  3.     }
  4. }

欢迎各位大佬们指出问题，谢谢你的查看。

javaScript之实战 页面筛选功能的更多相关文章

  1. ECSHOP分类页面筛选功能（按分类下子分类和品牌筛选）

    其实分类页面里面本来就有相关的品牌.属性.分类的筛选功能在category.php和模板加上相应的功能即可 1.读出当前分类的所有下级分类 $chlidren_category = $GLOBALS[ ...

  2. javascript 页面导出功能

    javascript 页面导出功能 <a class="btn" href="javascript:void(0);" onclick="win ...

  3. 14、Django实战第14天：列表筛选功能

    今天完成的是点击这些条件进行机构的筛选 首先来完成城市:当用户点击城市的时候,我们自动给它加一个参数(city.id) 编辑organization.views.py 刷新页面,发现筛选功能已经OK了 ...

  4. go语言实战教程之 后台管理页面统计功能开发（1）

    本节内容我们将学习开发实现后台管理平台页面统计功能开发的功能接口,本章节内容将涉及到多种请求路由的方式. 功能介绍 后台管理平台不仅是功能管理平台,同时还是数据管理平台.从数据管理平台角度来说,在管理 ...

  5. mxonline实战8，机构列表分页功能，以及按条件筛选功能

    对应github地址:列表分页和按条件筛选     一. 列表分页   1. pip install django-pure-pagination   2. settings.py中 install ...

  6. go语言实战教程之 后台管理页面统计功能开发（2）

    上节内容介绍了后台管理页面统计功能开发(1),从功能介绍,到接口请求分析和归类,最后是代码设计.经过上节内容的介绍,已经将业务逻辑和开发逻辑解释清楚,本节内容侧重于编程代码实现具体的功能. 当日增长数 ...

  7. 织梦CMS实现多条件筛选功能

    用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了. 其实筛选的话,主要有两个问题需要解决,一个是前台的筛选实现,一个是后台根据前台的点击, ...

  8. [js高手之路]设计模式系列课程-委托模式实战微博发布功能

    在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 <ul> < ...

  9. javascript实现当前页面截屏

    javascript实现当前页面截屏 一.前言 有客户要求能对用户当前页面进行指定区域截屏,类似qq截屏的实现效果.比如用户在处理工作的时候,将当前页面录入后的一些信息进行截图下载保存.但又不能安装任 ...

随机推荐

  1. 《JAVA程序设计》第五周总结

    第五周学习总结 本周目录: 第六章知识梳理 本周学习时遇到的问题和解决过程 上周错题与解析 码云链接 感想 第六章知识梳理: 接口:使用关键字interface定义,分为接口声明和接口体. inter ...

  2. python基础之Day17

    一.包 1.包 含有--init--.py的文件夹  是模块的一种形式 本质是一个文件夹(用来存放文件,包内所有的文件都是用来被导入的) import 包 包.名字     往包的init里加名字 导 ...

  3. Laravel API Tutorial: How to Build and Test a RESTful API

    With the rise of mobile development and JavaScript frameworks, using a RESTful API is the best optio ...

  4. ORACLE窗口函数

    --ORACLE窗口函数,是针对分析用的. --create tablecreate table EMP ( empno NUMBER(4) not null, ename VARCHAR2(10), ...

  5. mysql 外网访问

    --修改用户Root 可以外网访问 update user set host='%' where user='root'; --查询修改结果 select user,host from user; - ...

  6. Java上传和下载

    1.文件的上传 [1] 简介 > 将一个客户端的本地的文件发送到服务器中保存. > 上传文件是通过流的形式将文件发送给服务器. [2] 表单的设置 > 向服务器上传一个文件时,表单要 ...

  7. 《Miracle_House》团队项目系统设计改进

    一.团队项目系统设计改进: 1.分析项目系统设计说明书初稿的不足,特别是软件系统结构模型建模不完善内容: 对于原文档中,设计图中存在的错误以及文字描述不准确的地方进行了修改. 2. 团队项目Githu ...

  8. 分别求二叉树前、中、后序的第k个节点

    一.求二叉树的前序遍历中的第k个节点 //求先序遍历中的第k个节点的值 ; elemType preNode(BTNode *root,int k){ if(root==NULL) return ' ...

  9. Django模板标签

    一.模板标签 1.模板标签是在模板中运用python语言的实现,如for循环,if语句 2.模板标签的运用 2.1在teacher模板下创建students_list模板, 在teacher视图中国创 ...

  10. 2019.03.28 bzoj3325: [Scoi2013]密码（manacher+模拟）

    传送门 题意: 现在有一个nnn个小写字母组成的字符串sss. 然后给你nnn个数aia_iai​,aia_iai​表示以sis_isi​为中心的最长回文串串长. 再给你n−1n-1n−1个数bib_ ...