數(shù)組方法應(yīng)用案例
案例要求
target.png
目標(biāo)：通過頂部的輸入框和按鈕來篩選后端傳送的數(shù)據(jù)并顯示在頁面上
案例分析
HTML部分
首先用一個大div盒子將所有的東西裝起來
盒子內(nèi)部分為上下兩部分：篩選 + 結(jié)果展示挤悉，分別用兩個div盒子裝起來秒际。
篩選部分包含一個input輸入框共缕，和三個按鈕琢感。按鈕用三個span標(biāo)簽闹丐。
結(jié)果展示部分每一條信息用一個li標(biāo)簽展示，li標(biāo)簽內(nèi)部包含一個img標(biāo)簽和兩個p標(biāo)簽
CSS部分
- 整體在頁面中顯示的位置和大小
- 篩選部分中輸入框大小藕畔、間距臭胜、按鈕顏色、被選中的狀態(tài)
- 結(jié)果展示圖片大小魂迄、位置粗截、文字大小、顏色
JS部分
當(dāng)通過HTML和CSS將靜態(tài)頁面的展示效果做好并滿足要求之后捣炬，開始JS部分
- 默認(rèn)狀態(tài)下將顯示所有人員信息熊昌。通過
foreach將數(shù)組數(shù)據(jù)遍歷并顯示在頁面showMessage - 檢測input輸入的內(nèi)容，與人員姓名進(jìn)行比對
filterArrByText湿酸，將符合要求的數(shù)據(jù)顯示在頁面showMessage婿屹。用到的數(shù)組方法filter - 點(diǎn)擊按鈕，與人員性別進(jìn)行比對
filterArrBySex推溃，將符合條件的人員信息在頁面顯示出來showMessage - 符合條件下的信息顯示昂利。
- 先通過文本篩選并顯示，然后再次基礎(chǔ)山篩選性別
- 先通過性別篩選铁坎，然后通過文本復(fù)合篩選
案例實(shí)踐
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包含了所有內(nèi)容蜂奸，方便設(shè)置整體在頁面中的位置，和基本樣式 -->
<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>
<!-- 具體展示部分硬萍，在項(xiàng)目實(shí)施開始階段實(shí)施扩所，便于配合CSS設(shè)置樣式，
以此判斷是否復(fù)合要求朴乖，在靜態(tài)頁面完成之后注釋掉 -->
<!-- <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屬性值祖屏，便于進(jìn)行符合篩選，默認(rèn)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){//通過輸入的文本篩選,返回篩選后的數(shù)組
// 如果text為空就不遍歷，提高性能
if(!text){
return data;
}
return data.filter(function(ele,index,self){
return ele.name.indexOf(text) != -1;
});
// 通過indexOf方法判斷name中是否含有輸入的文本哩都，這個方法比較low魁兼，
// 只能判斷text是否為name非空子集
// 后續(xù)可以寫一個方法，只要text中含有和name中相同的關(guān)鍵字就返回true
//即取交集
}
//綁定輸入事件
oInput.oninput = function(){
//當(dāng)用戶輸入信息時調(diào)用方法filterArrByText
var filterArr = filterArrByText(personArr,this.value);
btnText.text = this.value;//將輸入的文本更新至全局
showMessage(filterArrBySex(filterArr,btnText.sex));
//這里將得到的數(shù)組再根據(jù)sex篩選一次，將結(jié)果展示到頁面
}
// 獲取btn按鈕咐汞，綁定事件
var btnObj = document.getElementsByClassName('btn');
btnArr = [].slice.call(btnObj,0);//通過數(shù)組的slice方法將類數(shù)組轉(zhuǎn)化為數(shù)組
var lastActiveBtn = btnArr[btnArr.length - 1];//默認(rèn)選中最后一個按鈕
//給每個按鈕綁定鼠標(biāo)單擊事件
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));
};
})
//設(shè)置按鈕選中樣式
function setActive(obj){
obj.className = 'btn active';//單擊按鈕更改選中樣式
lastActiveBtn.className = 'btn';//清除原有樣式
lastActiveBtn = obj;//將選中按鈕設(shè)置為上一個選中按鈕，便于下一次清除樣式
}
// 通過btnSex篩選
function filterArrBySex(data,sex){
if(sex == 'a'){
return data;
}
return data.filter(function(ele,index){
return ele.sex == sex;
})
}
總結(jié)
通過前兩天對數(shù)組方法的學(xué)習(xí)化撕，有了很大的收獲几晤。在本次實(shí)例練習(xí)中，發(fā)現(xiàn)了幾個問題：
- 不知道如何獲取input標(biāo)簽輸入的值
- 不知道如何將類數(shù)組對象轉(zhuǎn)化為數(shù)組（其實(shí)也并不清楚為什么獲得的是一個類數(shù)組對象）
- 如何獲取DOM元素植阴，怎么得到各屬性的值蟹瘾，怎么更改屬性值（能不能更改屬性值 ），怎么添加屬性以及屬性值掠手？DOM和BOM元素的操作這塊兒比較弱憾朴，還需要再學(xué)習(xí)學(xué)習(xí)。
