模仿boos的筛选，可以多选，点击添加背景，再次点击移除背景并且取消选中的

最新推荐文章于 2022-08-19 15:39:41 发布

1登峰造极

最新推荐文章于 2022-08-19 15:39:41 发布

阅读量258

点赞数 2

分类专栏： css html js jquery 文章标签：列表组点击添加背景拿到值反之取消

本文链接：https://blog.csdn.net/qq_33323469/article/details/87784591

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

19 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

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;
			}
		});

1登峰造极

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
模仿boos的筛选，可以多选，点击添加背景，再次点击移除背景并且取消选中的

1.布局就随便乱写一点，根据自己的需要自己排版效果如图2.数组 splice用法&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;筛选&lt;/title&gt; &lt;meta name="viewport"
复制链接

扫一扫