数组方法应用案例
案例要求
target.png
目标：通过顶部的输入框和按钮来筛选后端传送的数据并显示在页面上
案例分析
HTML部分
首先用一个大div盒子将所有的东西装起来
盒子内部分为上下两部分：筛选 + 结果展示，分别用两个div盒子装起来。
筛选部分包含一个input输入框，和三个按钮。按钮用三个span标签。
结果展示部分每一条信息用一个li标签展示，li标签内部包含一个img标签和两个p标签
CSS部分
- 整体在页面中显示的位置和大小
- 筛选部分中输入框大小、间距、按钮颜色、被选中的状态
- 结果展示图片大小、位置、文字大小、颜色
JS部分
当通过HTML和CSS将静态页面的展示效果做好并满足要求之后，开始JS部分
- 默认状态下将显示所有人员信息。通过
foreach将数组数据遍历并显示在页面showMessage - 检测input输入的内容，与人员姓名进行比对
filterArrByText，将符合要求的数据显示在页面showMessage。用到的数组方法filter - 点击按钮，与人员性别进行比对
filterArrBySex，将符合条件的人员信息在页面显示出来showMessage - 符合条件下的信息显示。
- 先通过文本筛选并显示，然后再次基础山筛选性别
- 先通过性别筛选，然后通过文本复合筛选
案例实践
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- wrapper包含了所有内容，方便设置整体在页面中的位置，和基本样式 -->
<div class="wrapper">
<!-- 筛选部分 -->
<div class="filterFunc">
<input type="text" id="demo"></input>
<span class="btn" sex='m'>Male</span>
<span class="btn" sex='f'>Female</span>
<span class="btn active" sex='a'>All</span>
</div>
<!-- sex为自定义属性 -->
<!-- 列表展示部分 -->
<div class="friendList">
<ul>
<!-- 具体展示部分，在项目实施开始阶段实施，便于配合CSS设置样式，
以此判断是否复合要求，在静态页面完成之后注释掉 -->
<!-- <li>
<img src="src/01.jfif" alt="">
<p class="name">15644gsgf</p>
<p class="des">15644gsgf</p>
</li>
<li>
<img src="src/02.jfif" alt="">
<p class="name">15644gsgf</p>
<p class="des">15644gsgf</p>
</li>
<li>
<img src="src/03.jfif" alt="">
<p class="name">15644gsgf</p>
<p class="des">15644gsgf</p>
</li>
<li>
<img src="src/04.jfif" alt="">
<p class="name">15644gsgf</p>
<p class="des">15644gsgf</p>
</li>
<li>
<img src="src/05.jfif" alt="">
<p class="name">15644gsgf</p>
<p class="des">15644gsgf</p>
</li> -->
</ul>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
CSS
/* reset style */
*{
margin: 0;
padding: 0;
list-style: none;
}
/* filterFunc style*/
.wrapper{
width: 400px;
margin: 100px auto 0px;
border: 1px solid #000;
border-radius: 5px;
padding: 10px;
background-color: #f4f4f4;
}
.wrapper .filterFunc{
margin-bottom: 10px;
}
.wrapper .filterFunc input{
width: 220px;
height: 15px;
border-radius: 5px;
padding:5px;
outline: none;
}
.wrapper .filterFunc .btn{
color: #4171f2;
padding: 5px;
cursor: pointer;
}
.wrapper .filterFunc .active{
color: azure;
background-color: #4171f2;
border-radius: 5px;
}
/* friendList style */
.friendList ul li{
border-bottom: 1px solid gray;
position: relative;
padding: 5px 0 5px 50px;
}
.friendList ul li img{
width: 40px;
height: 40px;
position: absolute;
left: 0;
top: 5px;
}
.friendList ul li .des{
font-size: 10px;
color: gray;
margin-top: 3px;
}
JS
var personArr = [
{ name: '张三', sex: 'm', age: 18,des: '别叫我张三',src:'src/00.jfif'},
{ name: '王二', sex: 'f', age: 22,des: '别叫我李四',src:'src/01.jfif'},
{ name: '李四', sex: 'm', age: 28,des: '别叫我王二',src:'src/02.jfif'},
{ name: '李四儿', sex: 'm', age: 28,des: '别叫我王二',src:'src/05.jfif'},
{ name: '麻子', sex: 'f', age: 46,des: '叫我大帅比',src:'src/03.jfif'},
{ name: '小麻子', sex: 'm', age: 16,des: '人家是小美女啦',src:'src/04.jfif'}
];
var oUl = document.getElementsByClassName('friendList')[0].getElementsByTagName('ul')[0];
var btnText = {
text: '',
sex: 'a'
}//存储输入的文本和按钮的sex属性值，便于进行符合筛选，默认text为空串，sex为a，即显示全部
//向页面添加信息
function showMessage(data){
var htmlStr = '';
data.forEach(function(ele,index,self){
htmlStr +='<li><img src=' + ele.src + '><p class="name">' + ele.name + '</p><p class="des">' + ele.des + '</p></li>'
})
oUl.innerHTML = htmlStr;
}
showMessage(personArr);
//获取输入文本信息
var oInput = document.getElementsByTagName('input')[0];
function filterArrByText(data,text){//通过输入的文本筛选,返回筛选后的数组
// 如果text为空就不遍历，提高性能
if(!text){
return data;
}
return data.filter(function(ele,index,self){
return ele.name.indexOf(text) != -1;
});
// 通过indexOf方法判断name中是否含有输入的文本，这个方法比较low，
// 只能判断text是否为name非空子集
// 后续可以写一个方法，只要text中含有和name中相同的关键字就返回true
//即取交集
}
//绑定输入事件
oInput.oninput = function(){
//当用户输入信息时调用方法filterArrByText
var filterArr = filterArrByText(personArr,this.value);
btnText.text = this.value;//将输入的文本更新至全局
showMessage(filterArrBySex(filterArr,btnText.sex));
//这里将得到的数组再根据sex筛选一次，将结果展示到页面
}
// 获取btn按钮，绑定事件
var btnObj = document.getElementsByClassName('btn');
btnArr = [].slice.call(btnObj,0);//通过数组的slice方法将类数组转化为数组
var lastActiveBtn = btnArr[btnArr.length - 1];//默认选中最后一个按钮
//给每个按钮绑定鼠标单击事件
btnArr.forEach(function(ele,index){
ele.onclick = function(){
// console.log(ele)
setActive(this);
var sex = ele.getAttribute('sex');//获取自定义属性值
btnText.sex = sex;//更新全局sex，便于符合筛选
var filterArr = filterArrBySex(personArr,sex);
showMessage(filterArrByText(filterArr,btnText.text));
};
})
//设置按钮选中样式
function setActive(obj){
obj.className = 'btn active';//单击按钮更改选中样式
lastActiveBtn.className = 'btn';//清除原有样式
lastActiveBtn = obj;//将选中按钮设置为上一个选中按钮，便于下一次清除样式
}
// 通过btnSex筛选
function filterArrBySex(data,sex){
if(sex == 'a'){
return data;
}
return data.filter(function(ele,index){
return ele.sex == sex;
})
}
总结
通过前两天对数组方法的学习，有了很大的收获。在本次实例练习中，发现了几个问题：
- 不知道如何获取input标签输入的值
- 不知道如何将类数组对象转化为数组（其实也并不清楚为什么获得的是一个类数组对象）
- 如何获取DOM元素，怎么得到各属性的值，怎么更改属性值（能不能更改属性值 ），怎么添加属性以及属性值？DOM和BOM元素的操作这块儿比较弱，还需要再学习学习。
网友评论