第一遍
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组筛选</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background-color: #666;
}
.border{
border: 1px solid #ccc;
border-radius: 10px;
}
.wrapper{
width: 600px;
margin: 150px auto 0;
background-color: #fff;
}
.wrapper .search{
width: 100%;
}
.wrapper .search input{
width: 10%;
height: 50px;
margin-top: 20px;
margin-left: 20px;
outline: none;
font-size: 18px;
text-indent: 1em;
font-weight: 600;
}
.wrapper .search input:last-of-type{
width: 40%;
}
.wrapper .search .sex{
float: right;
}
.wrapper .search .sex li{
float: left;
padding: 10px 10px;
border: 2px solid orange;
border-radius: 10px;
margin-top: 20px;
margin-right: 15px;
font-size: 18px;
font-weight: 600;
color: orange;
}
.wrapper .search .sex li:hover{
border-color: #ccc;
}
.wrapper .search .sex li.active{
background-color: orange;
color: #fff;
}
.wrapper .box{
width: 90%;
margin: 20px auto 0;
max-height: 650px;
min-height: 400px;
overflow-y: scroll;
}
.wrapper .box li{
width: 100%;
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
overflow: hidden;
border-radius: 10px;
/*text-overflow: ellipsis;*/
white-space: nowrap;
background-color: #333;
}
.wrapper .box li:nth-of-type(odd){
background-color: #eee
}
.wrapper .box li img{
height: 50px;
width: 50px;
border-radius: 10px;
}
.wrapper .box li span{
line-height: 50px;
vertical-align: top;
padding: 10px;
margin-left: 60px;
font-size: 18px;
font-weight: 600;
color: #ddd;
}
.wrapper .box li:nth-of-type(odd) span{
color: #333;
}
</style>
</head>
<body>
<div class="wrapper border">
<div class="search">
<input class="border" type="text" name="key" id="key" value="" placeholder="姓"/>
<input class="border" type="text" name="des" id="des" value="" placeholder="特征"/>
<ul class="sex">
<li class="active" sex='all'>all</li>
<li sex='male'>male</li>
<li sex='female'>female</li>
</ul>
</div>
<div class="box">
<ul>
<li>
<img src="../../手风琴/手风琴/images/1.jpg"/>
<span class="name">康阿卡价格</span>
<span class="des">价格可垃圾哦其他</span>
</li>
<li>
<img src="../../手风琴/手风琴/images/1.jpg"/>
<span class="name">康阿卡价格</span>
<span class="des">价格可垃啊嘎嘎啥价格六期图哦其他</span>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
//渲染，参数是筛选后的数组
//两个筛选函数
//组合筛选函数
Function.prototype.fangdou = function(delay){//防抖
var self = this;
var timer = null;
function F (){
var context = this;
var arg = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
self.apply(context,arg);
},delay)
}
return F
}
//防抖问题//要在哪个函数上进行防抖？
//1,返回数组的函数，包括mixfilter都不能进行防抖，因为return无法突破setTimeout里的function
//2,可以在事件函数上绑定，这样防抖防的的可能很彻底，但如果事件多的话，绑定也麻烦。
//3，在这个作业中render函数是每个事件都要执行的，并且不需要return 数据。但缺点是，会把sex函数也进行防抖。
var person = [
{name:'刘德华',src:'http://img2.imgtn.bdimg.com/it/u=3588772980,2454248748&fm=27&gp=0.jpg',sex:'male',des:'hansome'},
{name:'王大锤',src:'http://a.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=689c1f0953e736d15846840cae6063f4/6c224f4a20a44623d965f4b79f22720e0df3d7bc.jpg',sex:'male',des:'prety'},
{name:'李宗盛',src:'http://n1image.hjfile.cn/mh/2017/05/04/c67b756ce09b2b966a722cf3e2290807.gif',sex:'female',des:'kawayi'},
{name:'邓丽君',src:'http://cdn.duitang.com/uploads/item/201506/01/20150601140152_efWmA.jpeg',sex:'male',des:'augly'},
{name:'李文',src:'http://ww1.sinaimg.cn/large/ed97c81bgw1f10ztmblctj20zk0k040z.jpg',sex:'female',des:'too long'},
{name:'王栋',src:'http://www.wsxz.cn/ylzx/uploads/allimg/170622/12005313F-1.jpg',sex:'male',des:'很漂亮'},
{name:'刘恺威',src:'http://imgsrc.baidu.com/forum/w=580/sign=7c495eebdbf9d72a17641015e42b282a/872a6d224f4a20a42026061392529822730ed0e2.jpg',sex:'male',des:'很性感'},
{name:'李连杰',src:'http://cdn.static.koreastardaily.com/2017-05-04/94131-510586.jpg',sex:'female',des:'很nice'},
{name:'王刚',src:'http://i2.hdslb.com/bfs/archive/d7113f34bb56ef07c2326b92b7cc19ed288222e1.jpg',sex:'male',des:'声音很有磁性'},
{name:'马蓉',src:'http://photocdn.sohu.com/20141125/Img406369527.jpg',sex:'female',des:'眼睛很亮'},
{name:'李逵',src:'http://mimgnews1.naver.net/image/420/2017/11/14/093859464_27.jpg?type=w430_q70',sex:'female',des:'风流倜傥'},
{name:'王将军',src:'http://cdn.duitang.com/uploads/blog/201409/05/20140905165515_sMuuB.jpeg',sex:'male',des:'衣冠禽兽'},
{name:'六统领',src:'http://ww1.sinaimg.cn/large/ed97c81bjw1f1po5wogh7j20zk0k0tao.jpg',sex:'male',des:'街头霸王'},
{name:'李寻欢',src:'http://wx2.sinaimg.cn/large/6c77feddly1fc115p4g51j20xc0m8q6j.jpg',sex:'female',des:'醉生梦死'},
{name:'王八蛋',src:'http://ww1.sinaimg.cn/mw690/68359e7cjw1enbpc994xcj20im0smn3p.jpg',sex:'male',des:'终生奋斗'},
{name:'马上来',src:'http://pic96.huitu.com/res/20170601/1067488_20170601005652313040_1.jpg',sex:'female',des:'今朝有酒今朝醉'},
];
var list = document.getElementsByClassName('box')[0];
var oSex = document.getElementsByClassName('sex')[0];
var oInp = document.getElementsByTagName('input')[0];
var oDes = document.getElementsByTagName('input')[1];
//渲染
function render(arr){
var str = '';
arr.forEach(function (ele,index){
str += '<li>\
<img src='+ ele.src +'/>\
<span class="name">'+ ele.name +'</span>\
<span class="des">'+ ele.des + '</span>\
</li>'
});
list.innerHTML = str;
}
render(person);
// 筛选性别
oSex.onclick = function (e){
var e = e || window.event;
var t = e.target ||e.srcElement;
if(t.tagName == 'LI'){
state.sex = t.getAttribute('sex');
}
// render(filterSex(state.sex,person));
render(mixFilter(person));
}
function filterSex (sex,arr){
var newArr = [];
if(sex == 'all'){
newArr = arr;
}else{
newArr = arr.filter(function(ele,index){
return ele.sex == sex
})
}
return newArr
}
// 筛选姓
oInp.oninput = namename.fangdou(500);
function namename(){
state.value = this.value;
// render(filterName(state.value,person));
render(mixFilter(person));
}
function filterName (value,arr){
var newArr = [];
newArr = arr.filter(function(ele,index){
return ele.name.indexOf(value) !== -1
});
return newArr
}
//筛选特征
oDes.oninput = desdes.fangdou(500);
function desdes(){
state.des = this.value;
// render(filterDes(state.des,person));
render(mixFilter(person));
}
function filterDes (des,arr){
var newArr = [];
newArr = arr.filter(function(ele,index){
return ele.des.indexOf(des) !== -1
});
return newArr
}
//组合筛选
var state ={
value : '',
sex : 'all',
des : ''
}
//每次传的都是新的数组，不过每次都组合筛选，
//之所以感觉能在上次的数组基础上筛选，是因为把条件变量存了下来。
var filter = {
value : filterName,
sex : filterSex,
des : filterDes
}
function mixFilter(arr){
var lastArr = arr;
for(prop in filter){
lastArr = filter[prop](state[prop],lastArr);
}
return lastArr
}
//防抖
</script>
</body>
</html>
第二遍
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewprot" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>筛选名单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
body{
background-color: #333;
}
.wrapper {
margin: 100px auto;
width: 500px;
height: 500px;
border-radius: 15px;
background-color: #fff;
}
.wrapper .head{
width: 100%;
height: 50px;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 15px;
}
.wrapper .head input{
float: left;
height: 40px;
font: bold 17px/40px "微软雅黑";
border: 1px solid #ccc;
margin-left: 20px;
margin-top: 2.5px;
outline: none;
border-radius: 15px;
}
.wrapper .head .firstName {
width: 40px;
border-radius: 15px;
}
.wrapper .head .secondName {
width: 80px;
border-radius: 15px;
}
.wrapper .head .btn{
float: right;
border-radius: 15px;
}
.wrapper .head .btn span{
float: left;
height: 40px;
font: bold 17px/40px "微软雅黑";
border: 1px solid #ccc;
margin-top: 2.5px;
margin-right: 20px;
padding: 0 10px;
border-radius: 15px;
}
.wrapper .head .btn span.active{
background-color: #f00;
}
.wrapper .listContain{
width: 100%;
height: 90%;
box-sizing: border-box;
border: 1px solid #CCCCCC;
border-radius: 15px;
overflow-y: scroll;
}
.wrapper .listContain li{
width: 80%;
margin: 20px auto 0px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 15px;
}
.wrapper .listContain li:nth-of-type(2n){
background-color: #333;
color: white;
}
.wrapper .listContain li span{
display: inline-block;
line-height: 40px;
vertical-align: middle;
border-radius: 15px;
}
.wrapper .listContain li .headImg {
display: inline-block;
line-height: 40px;
vertical-align: middle;
width: 40px;
height: 40px;
background-image: url(img/1.jpg);
background-size: 100% 100%;
border-radius: 50%;
}
.wrapper .listContain li .name {
margin-left: 50px;
}
.wrapper .listContain li .description {
margin-left: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="head">
<input type="text" class="firstName" placeholder="姓"/>
<input type="text" class="secondName" placeholder="名" />
<div class="btn">
<span sex='all' class="active">all</span>
<span sex="male">male</span>
<span sex="female">female</span>
</div>
</div>
<div class="listContain">
<ul class="list">
</ul>
</div>
</div>
<script type="text/javascript">
var list = document.getElementsByClassName('list')[0];
var firstName = document.getElementsByClassName('firstName')[0];
var secondName = document.getElementsByClassName('secondName')[0];
var btn = document.getElementsByClassName('btn')[0];
firstName.onchange = function (e) {
key.name.value = this.value;
createLi(returnFinalArr(person,key));
}
secondName.onchange = function (e) {
key.des.value = this.value;
createLi(returnFinalArr(person,key));
}
btn.onclick = function (e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.tagName == 'SPAN'){
// 更改key 筛选数组
key.sex.value = target.getAttribute('sex');
createLi(returnFinalArr(person,key));
// 更改 class
document.getElementsByClassName('active')[0].className = '';
target.className = 'active';
}
}
//先生成数据
var person = [
{name:'刘德华',src:'http://img2.imgtn.bdimg.com/it/u=3588772980,2454248748&fm=27&gp=0.jpg',sex:'male',des:'hansome'},
{name:'王大锤',src:'http://a.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=689c1f0953e736d15846840cae6063f4/6c224f4a20a44623d965f4b79f22720e0df3d7bc.jpg',sex:'male',des:'prety'},
{name:'李宗盛',src:'http://n1image.hjfile.cn/mh/2017/05/04/c67b756ce09b2b966a722cf3e2290807.gif',sex:'female',des:'kawayi'},
{name:'邓丽君',src:'http://cdn.duitang.com/uploads/item/201506/01/20150601140152_efWmA.jpeg',sex:'male',des:'augly'},
{name:'李文',src:'http://ww1.sinaimg.cn/large/ed97c81bgw1f10ztmblctj20zk0k040z.jpg',sex:'female',des:'too long'},
{name:'王栋',src:'http://www.wsxz.cn/ylzx/uploads/allimg/170622/12005313F-1.jpg',sex:'male',des:'很漂亮'},
{name:'刘恺威',src:'http://imgsrc.baidu.com/forum/w=580/sign=7c495eebdbf9d72a17641015e42b282a/872a6d224f4a20a42026061392529822730ed0e2.jpg',sex:'male',des:'很性感'},
{name:'李连杰',src:'http://cdn.static.koreastardaily.com/2017-05-04/94131-510586.jpg',sex:'female',des:'很nice'},
{name:'王刚',src:'http://i2.hdslb.com/bfs/archive/d7113f34bb56ef07c2326b92b7cc19ed288222e1.jpg',sex:'male',des:'声音很有磁性'},
{name:'马蓉',src:'http://photocdn.sohu.com/20141125/Img406369527.jpg',sex:'female',des:'眼睛很亮'},
{name:'李逵',src:'http://mimgnews1.naver.net/image/420/2017/11/14/093859464_27.jpg?type=w430_q70',sex:'female',des:'风流倜傥'},
{name:'王将军',src:'http://cdn.duitang.com/uploads/blog/201409/05/20140905165515_sMuuB.jpeg',sex:'male',des:'衣冠禽兽'},
{name:'六统领',src:'http://ww1.sinaimg.cn/large/ed97c81bjw1f1po5wogh7j20zk0k0tao.jpg',sex:'male',des:'街头霸王'},
{name:'李寻欢',src:'http://wx2.sinaimg.cn/large/6c77feddly1fc115p4g51j20xc0m8q6j.jpg',sex:'female',des:'醉生梦死'},
{name:'王八蛋',src:'http://ww1.sinaimg.cn/mw690/68359e7cjw1enbpc994xcj20im0smn3p.jpg',sex:'male',des:'终生奋斗'},
{name:'马上来',src:'http://pic96.huitu.com/res/20170601/1067488_20170601005652313040_1.jpg',sex:'female',des:'今朝有酒今朝醉'},
];
// 筛选数据问题.
// 筛选条件 1. 姓 2.描述 3.性别.
// 根据筛选之后的数据,进行生成结构,并且渲染.
// 源数组,name,des,但我们希望可扩展,也就是这个筛选条件可以增加.
// 我们先试着筛选一下性别
function sexFilter (arr,sex) {
var newArr = [];
if(sex == 'all'){return arr};
arr.forEach(function (item) {
if(item.sex == sex){
newArr.push(item);
}
})
return newArr;
}
function desFilter (arr,des) {
var newArr = [];
if(des == ''){return arr};
arr.forEach(function (item) {
if (item.des.indexOf(des) !== -1) {
newArr.push(item);
}
});
return newArr;
}
function nameFilter (arr,name) {
var newArr = [];
if(name == ''){return arr};
arr.forEach(function (item) {
if (item.name.indexOf(name) !== -1) {
newArr.push(item);
}
});
return newArr;
}
// 单个的筛选条件已经出来了.
// 如何组合筛选问题. 需要有一个保存筛选关键词数据的容器,全局变量.
// 有监听事件时,先更改这个数据,然后再调用相应的方法.
// 每个数据和每个方法应该是配对的.
// 这玩的是一个组合问题.
var key = {
name : {
value: '',
fun : nameFilter
},
des : {
value : '',
fun : desFilter
},
sex : {
value : '',
fun : sexFilter
}
};
// 组合筛选
function returnFinalArr (arr,key) {
var newArr = arr;
for(var prop in key){
newArr = key[prop].fun(newArr,key[prop].value);
}
return newArr;
}
// 渲染
function createLi (arr) {
var str = '';
arr.forEach(function (item) {
str += '<li class="item">\
<img class="headImg" src=' + item.src + '>\
<span class="name">' + item.name + '</span>\
<span class="description">' + item.des + '</span>\
</li>'
});
list.innerHTML = str;
}
createLi(person);//初始化
//添加事件.更改数据,调用方法.
</script>
</body>
</html>
