案例样式即功能
HTML代码：
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<link rel=\"stylesheet\" href=\"index.css\">
<title>Document</title>
</head>
<body>
<div class=\"wrapper\">
<div class=\"search\">
<input type=\"text\" placeholder=\"请输入用户名\">//搜索框
<p>//性别筛选按钮
<span sex=\'m\'>male</span>
<span sex=\'f\'>female</span>
<span sex=\'a\' class=\"active\">all</span>
</p>
</div>
<div class=\"user-list\">//搜索列表，有js渲染添加
<ul>
</ul>
</div>
</div>
<script src=\"index.js\"></script>
</body>
</html>
CSS代码：
*{
margin:0;
padding:0;
list-style: none;
}
.wrapper{
width:400px;
border:1px solid #ccc;
margin: 100px auto;
border-radius:4px;
}
.wrapper .search{
width:100%;
height:50px;
line-height:50px;
}
.wrapper .search input{
padding:10px 15px;
border-radius:4px;
margin-left:30px;
border:1px solid #ccc;
outline:none;
}
.wrapper .search p{
display:inline-block;
}
.wrapper .search p span{
color:#38f;
padding:3px 5px;
}
.wrapper .search p span.active{
color:#fff;
background-color:#38f;
border-radius: 4px;
}
.wrapper .user-list{
width:100%;
}
.wrapper .user-list ul{
width:100%;
}
.wrapper .user-list ul li{
border-bottom:1px solid #ccc;
position:relative;
padding:10px 0;
margin:0 30px;
}
.wrapper .user-list ul li img{
height:40px;
width:40px;
position:absolute;
}
.wrapper .user-list ul li p{
margin-left:50px;
width:300px;
color:rgb(117, 114, 114);
}
Javascript代码：
var oul=document.getElementsByTagName(\"ul\")[0];
var oinput=document.getElementsByTagName(\"input\")[0];
var text=\'\',sex=\'a\';//要将text和sex写在全局变量里面，这样可以记录上次操作的值为后续的页面渲染作准备；
var personArr=[
{name:\'王刚\',src:\'images/1.png\',des:\'颈椎不好\',sex:\'m\'},
{name:\'刘颖\',src:\'images/2.png\',des:\'我是谁\',sex:\'f\'},
{name:\'王秀英\',src:\'images/3.jpg\',des:\'我很好看\',sex:\'f\'},
{name:\'刘金磊\',src:\'images/4.png\',des:\'你没有见过陌生人的脸\',sex:\'m\'},
{name:\'刘飞仙\',src:\'images/5.jpg\',des:\'瓜皮刘\',sex:\'m\'}
];
//页面渲染
function randerlist(arr){
var str=\'\';
arr.forEach(function(elem,index){
str+=\'<li>\\
<img src=\"\'+elem.src+\'\">\\
<p class=\"username\">\'+elem.name+\'</p>\\
<p class=\"des\">\'+elem.des+\'</p>\\
</li>\'
});
oul.innerHTML=str;
}
randerlist(personArr);
//为性别筛选按钮设置点击事件，并获取每一次点击后的结果进行页面渲染。
var spans=document.getElementsByTagName(\"p\")[0].children;
for(var i=0;i<spans.length;i++){
(function(j){
spans[j].onclick=function(){
//每点击一个按钮就要重新设置css属性
for(var k=0;k<spans.length;k++){
spans[k].className=\"\";
}
this.className=\'active\';
/*不要直接var lastArr=filterSex(this.innerHTML[0],personArr);，一定要写sex=this.innerHTML[0];
因为当点击了性别筛选按钮并输入姓名之后进行了一次渲染，再次删除姓名此时text=‘\'，需要重新渲染，但并没有记
录上次点击性别筛选按钮后的sex值，此时他会默认为\'a\';*/
sex=this.innerHTML[0];
var lastArr=filterSex(sex,personArr);
lastArr=filterText(text,lastArr);
randerlist(lastArr);
}
})(i);
}
//获取搜索框内容，并重新渲染
oinput.oninput=function(){
text=this.value;
var newArr=filterText(text,personArr);
newArr=filterSex(sex,newArr);
randerlist(newArr);
}
//根据文本框的内容进行筛选，并返回筛选后的数组
function filterText(text,arr){
//filter函数，筛选作用，将return true的elem拼成一个数组并返回
return arr.filter(function(elem,index){
if(elem.name.indexOf(text)!=-1){
return true;
}else{
return false;
}
});
}
//根据性别进行筛选，并返回筛选后的数组
function filterSex(sex,arr){
if(sex==\'a\'){
return arr;
}else{
return arr.filter(function(elem,index){
if(elem.sex==sex){
return true;
}else{
return false;
}
})
}
}
总结
© 版权声明
THE END
暂无评论内容