1.布局就随便乱写一点,根据自己的需要自己排版
效果如图
2.数组 splice用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>筛选</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 100%;
background: #fff;
}
.box ul li {
float: left;
width: 25%;
color: #00ffd2;
font-weight: bold;
cursor: pointer;
list-style: none;
text-align: center;
margin: 0px 0px;
height: 40px;
line-height: 40px;
}
#popup {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
display: none;
}
#popup_box {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
position: relative
}
#popup_box_main {
width: 100%;
height: 60%;
background: #fff;
position: absolute;
bottom: 0px;
left: 0px;
overflow: auto;
}
.popup_top {
width: 100%;
height: 45px;
display: flex;
border-bottom: 1px solid #ccc;
}
.popup_top p {
flex: 1;
text-align: center;
line-height: 45px;
color: #999;
transition: 0.2s;
font-weight: 700;
}
.active {
background: #00FFD2;
color: #fff !important;
font-weight: bold;
}
.popup_list ul li {
border: 1px solid #cccccc94;
display: inline-block;
padding: 6px 5px;
margin: 6px 10px;
border-radius: 3px;
}
.listy {
border-radius: 3px;
}
.popup_list ul span {
padding: 6px 5px;
margin: 6px 10px;
border-radius: 3px;
border: 1px solid #ccc;
}
.spanClas {
padding: 6px 5px;
margin: 6px 10px;
border-radius: 3px;
border: 1px solid #ccc;
}
.exType_spanon {
background: #00FFD2;
color: #fff;
}
.remocall {
background: #fff;
color: #ccc;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>推存</li>
<li>公司</li>
<li id='exType'>规模</li>
<li>薪资</li>
</ul>
</div>
<h2>点击规模查看效果</h2>
<!--
作者:1077321622@qq.com
时间:2019-02-19
描述:筛选弹窗
-->
<div id="popup">
<div id='popup_box'>
<div id="popup_box_main" onclick="evenfu(event)">
<div class="popup_top">
<p id='cancel'>重置</p>
<p class="active" id='popup_succ'>确定</p>
</div>
<div class="popup_list">
<ul id='ullist'>
<span id='spanBtn'>全部</span>
<li>10人</li>
<li>20人</li>
<li>30人</li>
<li>40人</li>
<li>50人</li>
<li>60人</li>
<li>70</li>
<li>80</li>
<li>90人</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var popup = document.getElementById('popup'); //弹窗父容器
var popup_box = document.getElementById('popup_box'); //隐隐层
var popup_box_main = document.getElementById('popup_box_main'); //列表盒子
var exType = document.getElementById('exType');
var li = document.querySelectorAll('.popup_top p');
var succ = document.getElementById('popup_succ'); //确定
var cancel = document.getElementById('cancel'); //取消
var spanBtn = document.getElementById('spanBtn'); //全部
var exType_arr = [];
var arrlist = [];
var listlis = $("#ullist li");
//点击确定重置样式
for(var i = 0; i < li.length; i++)
li[i].onclick = function() {
for(var i = 0; i < li.length; i++) li[i].className = '';
this.className = 'active'
}
function commHide() {
popup.style.display = 'none';
}
//打开窗口事件
exType.onclick = function() {
popup.style.display = 'block';
}
//点击阴影关闭
popup_box.onclick = function() {
commHide();
}
//组织冒泡事件
function evenfu(e) {
e.stopPropagation();
}
//点击每个选项
listlis.click(function() {
//清除全部的样式
$('#spanBtn').removeClass("exType_spanon");
var index = $(this).index();
if($(this).hasClass("exType_spanon")) {
//移除样式
$(this).removeClass("exType_spanon");
$(this).addClass("listy");
//
exType_arr.splice(index - 1, 1);
arrlist = exType_arr;
} else {
//添加样式
$(this).addClass("exType_spanon");
//
exType_arr[index - 1] = $(this).text();
arrlist = exType_arr;
}
});
//点击全部
spanBtn.onclick = function() {
cleanClss();
if($(this).hasClass("exType_spanon")) {
//移除样式
$(this).removeClass("exType_spanon");
} else {
//添加样式
$(this).addClass("exType_spanon");
exType_arr = [];
console.log('已经选择全部');
}
}
//点击确定
succ.onclick = function() {
//过滤数组中空元素 未定元素 null元素
var arrname = arrlist.filter(function(s) {
return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
});
alert(arrname)
}
//点击取消
cancel.onclick = function() {
exType_arr = [];
cleanClss();
commHide();
}
function cleanClss() {
for(var i = 0; i < listlis.length; i++) {
listlis[i].className = '';
listlis[i].className = 'spanClas';
}
}
</script>
</html>
写了很多js好多都是控制展开隐藏用的
主要的还是这段
listlis.click(function() {
//清除点击全部的样式
$('#spanBtn').removeClass("exType_spanon");
var index = $(this).index();//获取点击的下标
if($(this).hasClass("exType_spanon")) { //判断有没有这个类名
//有就移除样式
$(this).removeClass("exType_spanon");
$(this).addClass("listy");
//删除数组中再次点击的元素
exType_arr.splice(index - 1, 1);
arrlist = exType_arr; //赋值给新数组 ,根据自己的情况来定
} else {
//没有添加样式
$(this).addClass("exType_spanon");
//对应下标赋值
exType_arr[index - 1] = $(this).text();
arrlist = exType_arr;
}
});