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

 成品如下：

开始搭建 html  和  css

html代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!-- 格式化css默认样式 -->

    <link rel="stylesheet" href="./css/css-comment.css">

    <!-- 搭建好基本样式 -->

    <link rel="stylesheet" href="./css/筛选小demo.css">

</head>

<body>

    <div class="wra">

        <div class="wraTop">

            <input type="text">

            <div class="sex">

                <span class="btn" id="m">Male</span>

                <span class="btn" id="f">Female</span>

                <span class="btn default" id="a">All</span>

            </div>

            <div class="age">

            </div>

        </div>

        <div class="wraBottom">

            <ul>

                <li>

                    <img src="./img/head.jpg">

                    <p class="name">王小明</p>

                    <span>18岁</span>

                    <p class="des">成绩很好</p>

                </li>

                <li>

                    <img src="./img/head.jpg">

                    <p class="name">王小明</p>

                    <span>18岁</span>

                    <p class="des">成绩很好</p>

                </li>

                <li>

                    <img src="./img/head.jpg">

                    <p class="name">王小明</p>

                    <span>18岁</span>

                    <p class="des">成绩很好</p>

                </li>

                <li>

                    <img src="./img/head.jpg">

                    <p class="name">王小明</p>

                    <span>18岁</span>

                    <p class="des">成绩很好</p>

                </li>

                <li>

                    <img src="./img/head.jpg">

                    <p class="name">王小明</p>

                    <span>18岁</span>

                    <p class="des">成绩很好</p>

                </li>

            </ul>

        </div>

    </div>

</body>

</html>

css代码如下：

.wra {

    width: 500px;

    margin: 100px  auto 0px;

    border: 1px solid #d7d7d7;

    padding: 10px 15px;

    border-radius: 5px;

}

.wra .wraTop{

    margin-top: 10px;

    margin-bottom: 10px;

}

.wra .wraTop input{

    width: 240px;

    height: 20px;

    outline: none;

    border:1px solid #d7d7d7;

    padding-left: 10px;

    border-radius: 5px;

}

.wra .wraTop .sex{

   display:inline-block;

}

.wra .wraTop .btn{

    display: inline-block;

    height: 18px;

    margin-left: 10px;

    cursor:pointer;

    line-height:18px;

    padding: 1px 2px;

    border-radius: 2px;

}

.wra .wraTop .btn.default{

    color: #fff;

    background-color: rgb(77, 199, 247);

}

/* bottom */

.wra .wraBottom ul li{

    position: relative;

    margin-bottom:15px;

    border-bottom: 1px solid rgb(245, 242, 242);

    padding: 10px 0px 10px 50px;

}

.wra .wraBottom ul li img{

    position: absolute;

    top: 10px;

    left: 0px;

    width: 40px;

    height: 40px;

}

.wra .wraBottom ul li span{

    display: inline-block;

    margin: 5px 0;

}

.wra .wraBottom ul li .des{

    color: rgb(228, 95, 95);

    font-size: 10px;

}

搭建好的效果：

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

js 代码如下

var arr = [ //模拟后台给的数据

    { name: "王小明", src: "./img/head.jpg", des: "成绩很好", sex: "m", age: 18 },

    { name: "王大海", src: "./img/head.jpg", des: "长得帅", sex: "m", age: 19 },

    { name: "刘小红", src: "./img/head.jpg", des: "莫名的喜感", sex: "f", age: 17 },

    { name: "孙小白", src: "./img/head.jpg", des: "一白遮三丑", sex: "f", age: 16 },

    { name: "刘小黑", src: "./img/head.jpg", des: "成绩很好", sex: "m", age: 20 }

];

var wra = document.getElementsByClassName("wra")[0];

var wb = wra.getElementsByClassName("wraBottom")[0];

var oUl = wb.getElementsByTagName("ul")[0];

var sex = document.getElementsByClassName('sex')[0];

var sexbtn = sex.getElementsByClassName("btn");

var inp = wra.getElementsByTagName("input")[0];

//创建全局默认值，记录每一次事件触发的数值

var state = {

    text: '',

    sex: 'a'

}

// 渲染页面

function renderPage(data) {

    oUl.innerHTML = "";

    data.forEach(function (ele, index, self) {

        //遍历数组里面的东西，取其中数据构建html结构，

        oUl.innerHTML += '<li><img src=' + ele.src + '><p class="name">' + ele.name + '</p><span>' + ele.age + '岁</span><p class="des">' + ele.des + '</p></li>';

    });

}

renderPage(arr);

//绑定性别点击事件

var lastDefault = sexbtn[2]; //默认性别选项All

for(var i = 0; i < sexbtn.length; i++){

    (function(j){

        sexbtn[j].onclick = function(){

            sexbtn[j].className = "btn default";//点击时，给点击的按钮添加 css样式(default)

            lastDefault.className = "btn";// 赋给样式后，取消上一个btn的样式

            lastDefault = sexbtn[j];//赋给样式后，此次点击的btn 就成了过去

            state.sex = sexbtn[j].id;

            var newArr = screenSex(arr, state.sex); //筛选性别执行后返回新数组

            renderPage( screenInput(newArr, state.text));//利用新数组再次筛选搜索框，筛选后渲染页面

        }

    })(i)

}

// 筛选性别函数

function screenSex(data, sex) {

    if (sex == "a") { //判断输入的值是否为默认值a，如果是，不用筛选，直接返回原数组

        return data;

    } else {

        return data.filter(function (ele, index, self) {//利用数组方法filter过滤，不懂filter方法，请看本人另外笔记filter方法

            return sex == ele.sex;

            //第一遍循环，查看 数组第一个数据里面的 sex 是否等于 传进来的sex  如果是，返回这条数据到新数组

            //{ name: "王小明", src: "./img/head.jpg", des: "成绩很好", sex: "m", age: 18 }

        })

    }

}

//触发input事件

inp.oninput = function(){

    state.text = this.value;//记录当前输入的字

    var newArr = screenInput(arr, state.text);//筛选搜索框输入的值，执行后返回新数组

    renderPage( screenSex(newArr, state.sex));//利用新数组再次筛选性别，筛选后渲染页面

}

//筛选搜索框函数

function screenInput(data, value){

    if(!value){//判断输入的值是否为默认值''，如果是，不用过滤，直接返回原数组

        return data;

    }else{

      return data.filter(function(ele, index, self){

           return ele.name.indexOf(value) >= 0;

            //字符串方法，indexOf 查看value这个字符串，是否存在于ele.name中，如果存在返回大于0的索引(true)

            //如果不存在，返回-1，(false)

            //如果返回(true)，返回这条数据到新数组中

       })

    }

}

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

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

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

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

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

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

//此方法用于执行执行screenInput 和 screenSex函数

function combineFilter(comfig){

    return function (data){ //这里data的值，是通过调用lastFilterArr(这里传入的)

        for(var i in comfig){

            data = comfig[i](data, store.getState(i))//要拿到input触发事件的value，只能通过store.getState方法取，此时的i为text

            //第一圈循环相当于 取出screenInput函数传入数据执行(data, store.getState(i))执行后的结果data接收

            //data 接收screenInput过滤后的新数组，等待第二次循环

            //第二次循环 轮到screenSex 函数， 此时 传入的data是screenInput过滤好后的数组，这样就达到了 双层过滤；

        }

        return data;

    }

}

var lastFilterArr = combineFilter({

    text: screenInput, //这两个函数，是我们抽出来的行为，

    sex: screenSex

     //这里传入的值  combineFilter(comfig)  接收

})

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

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

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

最后 加上防抖功能

function debounce(handler, delay) {

    var timer = null;

    return function () {

        var _self = this,

            _arg = arguments;
　　　　　　clearTimeout(timer);
        timer = setTimeout(function () {
            handler.apply(_self, _arg);

        }, delay)

    }

}

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

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. Could not load file or assembly (Exception from HRESULT: 0x80131047)-解决办法

    场景:.Net 4.0 MVC WebAPI 应用程序添加ApplicationInsights监控后在demo环境运行正常,发布到testing环境出现异常 异常信息: Could not load ...

  2. Java 日志体系（二）jcl 和 slf4j

    Java 日志体系(二)jcl 和 slf4j <java 日志体系(一)统一日志>:https://www.cnblogs.com/binarylei/p/9828166.html &l ...

  3. sqlserv 配置 CLR

    转载地址:http://www.cnblogs.com/Brambling/p/8000911.html   //clr 配置 https://docs.microsoft.com/zh-cn/sql ...

  4. Spring-boot集成RabbitMQ踩过的坑

    1.java.net.SocketException: socket closed 官方文档已经说明,新建user和guest的账户是没有远程登录的权限的 需要对登录所用账户授权 解决方法: rabb ...

  5. angularJs $templateCache

    模板加载后,AngularJS会将它默认缓存到 $templateCache 服务中.在实际生产中,可以提前将模板缓存到一个定义模板的JavaScript文件中,这样就不需要通过XHR来加载模板了 $ ...

  6. Eclipse 使用 ButterKnife 细节问题

    原本这都是很常见的功能 加入以下jar库就可以了. 哪里知道左右都不能获得点击时间; http://repo1.maven.org/maven2/com/jakewharton/butterknife ...

  7. clouderamanager安装

    下载地址 http://archive.cloudera.com/cm5/cm/5/ 安装 先安装manager,再安装cdh 待续

  8. # 2019-2020-4 《Java 程序设计》结对项目总结

    2019-2020-4 <Java 程序设计>结对项目阶段总结---<四则运算--整数> 一.需求分析 实现一个命令行程序 要求: 自动生成小学四则运算题目(加,减,乘,除): ...

  9. Python基础环境搭建

    一.编程语言 1.解释型语言:每执行一次程序就要将代码翻译一次,如Java.JavaScript.VBScript.Perl.Python.Ruby.MATLAB 等都是解释型语言 2.编译型语言:程 ...

  10. qt网络通讯出现中文乱码

    转自:https://blog.csdn.net/i_fuqiang/article/details/21174227 发送: void TcpS::btn_send() { QByteArray d ...