jquery实现多条件筛选

最新推荐文章于 2022-03-31 12:08:25 发布

五角钱的程序员

最新推荐文章于 2022-03-31 12:08:25 发布

阅读量1.9k

点赞数 3

分类专栏：前端文章标签：列表 html jquery css js

原文链接：https://www.helloweba.net/javascript/314.html

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我们在电商平台购买商品时，在商品列表页根据品牌、款式、价格范围等条件进行筛选查询，当点击某个条件时，在页面上会显示用户所选择的条件集合，并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery多条件筛选</title>
</head>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<style>
    *{margin:0;padding:0;list-style: none;}
body{font-size:12px;}
.select{width:50%;border:1px solid #ddd;margin:30px auto;border-radius:5px;padding:5px 10px;}
.select li{padding:10px 0 5px 100px}
.select .select-list{border-bottom:1px dashed #eee;}
.select dl{position:relative;line-height:24px;}
.select dl:after{content:" ";display:block;clear:both;height:0;overflow:hidden}
.select dt{width:100px;margin-bottom:5px;position:absolute;top:0;left:-100px;text-align:right;color:#666;height:24px;line-height:24px}
.select dd{float:left;display:inline;margin:0 0 5px 5px;}
.select a{display:inline-block;white-space:nowrap;height:24px;padding:0 10px;text-decoration:none;color:#039;border-radius:2px;}
.select a:hover{color:#f60;background-color:#f3edc2;}
.select .selected a{color:#fff;background-color:#f60;}
.select-result dt{font-weight:bold;}
.select-no{color:#999;}
.select .select-result a{padding-right:20px;background:#f60 url("close.gif") right 9px no-repeat;}
.select .select-result a:hover{background-position:right -15px;}
</style>
<body>
	<div id="wrap">
		<ul class="select">
			<li class="select-list">
				<dl id="select1">
					<dt>上装:</dt>
					<dd class="select-all selected"><a href="#">全部</a></dd>
					<dd><a href="#">羽绒服</a></dd>
					<dd><a href="#">棉衣</a></dd>
					<dd><a href="#">毛呢外套</a></dd>
					<dd><a href="#">针织衫</a></dd>
					<dd><a href="#">风衣</a></dd>
					<dd><a href="#">卫衣</a></dd>
				</dl>
			</li>
			<li class="select-list">
				<dl id="select2">
					<dt>裤装:</dt>
					<dd class="select-all selected"><a href="#">全部</a></dd>
					<dd><a href="#">牛仔裤</a></dd>
					<dd><a href="#">打底裤</a></dd>
					<dd><a href="#">休闲裤</a></dd>
					<dd><a href="#">阔腿裤</a></dd>
					<dd><a href="#">铅笔裤</a></dd>
				</dl>
			</li>
			<li class="select-list">
				<dl id="select3">
					<dt>裙装:</dt>
					<dd class="select-all selected"><a href="#">全部</a></dd>
					<dd><a href="#">连衣裙</a></dd>
					<dd><a href="#">半身裙</a></dd>
					<dd><a href="#">蕾丝连衣裙</a></dd>
					<dd><a href="#">雪纺连衣裙</a></dd>
				</dl>
			</li>
			<li class="select-result">
				<dl>
					<dt>已选条件:</dt>
					<dd class="select-no">暂时没有选择过滤条件</dd>
				</dl>
			</li>
		</ul>
	</div>

<script>

    $("#select1 dd").click(function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		if($(this).hasClass("select-all")){
			$("#selectA").remove();
		}else{
			var copyA = $(this).clone();
			if($("#selectA").length > 0){
				$("#selectA a").html($(this).text());
			}else{
				$(".select-result dl").append(copyA.attr("id","selectA"));
			}
		}
	})
	$("#select2 dd").click(function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		if($(this).hasClass("select-all")){
			$("#selectB").remove();
		}else{
			var copyB = $(this).clone();
			if($("#selectB").length > 0){
				$("#selectB a").html($(this).text());
			}else{
				$(".select-result dl").append(copyB.attr("id","selectB"));
			}
		}
	})
	$("#select3 dd").click(function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		if($(this).hasClass("select-all")){
			$("#selectC").remove();
		}else{
			var copyC = $(this).clone();
			if($("#selectC").length > 0){
				$("#selectC a").html($(this).text());
			}else{
				$(".select-result dl").append(copyC.attr("id","selectC"));
			}
		}
	})
	$("#selectA").on("click",function(){
		$(this).remove();
		$("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
	})
	$("#selectB").on("click",function(){
		$(this).remove();
		$("#select2 .select-all").addClass("selected").siblings().removeClass("selected");
	})
	$("#selectC").on("click",function(){
		$(this).remove();
		$("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
	})
	$(".select dd").on("click", function () {
		if ($(".select-result dd").length > 1) {
			$(".select-no").hide();
		} else {
			$(".select-no").show();
		}
	});
</script>
</body>
</html>

效果：
在这里插入图片描述

在这里插入图片描述
所有巧合的是要么是上天注定要么是一个人偷偷的在努力。

个人微信公众号，专注于学习资源、笔记分享,欢迎关注。我们一起成长，一起学习。一直纯真着，善良着，温情地热爱生活,，如果觉得有点用的话，请不要吝啬你手中点赞的权力,谢谢我亲爱的读者朋友。
五角钱的程序员,专注于学习资源、笔记分享。

Wake up each morning with gratitude
that you have another day to love
and you can spend one more day with someone you love.

每天早上你醒来时，
要感谢上苍，
你又有一天的时间可以去爱和拥有你的爱人。

五角钱的程序员

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jquery实现多条件筛选

我们在电商平台购买商品时，在商品列表页根据品牌、款式、价格范围等条件进行筛选查询，当点击某个条件时，在页面上会显示用户所选择的条件集合，并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫

专栏目录