文档章节

jquery实现多条件筛选

wftt
 wftt
发布于 2018/03/06 15:23
字数 757
阅读 218
收藏 2

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery多条件筛选</title>
</head>
<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>
</body>
</html>

css代码:

*{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;}

js代码:

$("#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").live("click",function(){
		$(this).remove();
		$("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
	})
	$("#selectB").live("click",function(){
		$(this).remove();
		$("#select2 .select-all").addClass("selected").siblings().removeClass("selected");
	})
	$("#selectC").live("click",function(){
		$(this).remove();
		$("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
	})
	$(".select dd").live("click", function () {
		if ($(".select-result dd").length > 1) {
			$(".select-no").hide();
		} else {
			$(".select-no").show();
		}
	});

效果展示:

close.gif:

注意:

live():jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

但是要注意live的使用版本,live方法在1.7中已经不建议使用,在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。

on方法可以接受三个参数:事件名、触发选择器、事件函数。

需要特别注意的是:on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名,使用它就可以实现live的效果。

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang
2018/05/24
0
0
码云前端组件库 - Gitee-Frontend

简介 一个前端组件库,基于 jQuery 和 Semantic-UI 实现,包含了码云现在用到的一些通用性较强的组件。 依赖 以下依赖项需要手动引入。 jQuery Semantic-UI Date Range Picker 组件 Filtered...

司徒永超
2018/08/07
1K
2
jQuery学习笔记之JavaScript脚本库和元素选择器研究[图]

jQuery学习笔记之JavaScript脚本库和元素选择器研究[图] jQuery是一套JavaScript脚本库,相当于Java的类库,将一些工具方法或者对象方法封装在类库中,方便用户使用。 工厂函数指的是这些内建...

原创小博客
2018/08/06
8
0
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.5K
10
jquery表格

新闻来源:noupe.com 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行...

长平狐
2012/10/16
501
1

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
276
6
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部