jQuery实现多条件筛选
我们在电商平台购买商品时,在商品列表页根据品牌、款式、价格范围等条件进行筛选查询,当点击某个条件时,在页面上会显示用户所选择的条件集合,并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。
HTML
首先,我们将查询条件分类,在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。
<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="#">T恤</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-result"> <dl> <dt>已选条件:</dt> <dd class="select-no">暂时没有选择过滤条件</dd> </dl> </li> </ul>
布置好内容后,给页面内容加上css样式以及加载相关js。
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
jQuery
当用户点击任意条件时,标记当前选中状态,相邻条件取消选中状态,并且更新已选条件容器内容,请看代码:
$(document).ready(function() {$("#select1 dd").click(function() {$(this).addClass("selected").siblings().removeClass("selected");if ($(this).hasClass("select-all")) {$("#selectA").remove();} else {var copyThisA = $(this).clone();if ($("#selectA").length > 0) {$("#selectA a").html($(this).text());} else {$(".select-result dl").append(copyThisA.attr("id", "selectA"));}}});$("#select2 dd").click(function() {$(this).addClass("selected").siblings().removeClass("selected");if ($(this).hasClass("select-all")) {$("#selectB").remove();} else {var copyThisB = $(this).clone();if ($("#selectB").length > 0) {$("#selectB a").html($(this).text());} else {$(".select-result dl").append(copyThisB.attr("id", "selectB"));}}});$("#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");});$(".select dd").live("click",function() {if ($(".select-result dd").length > 1) {$(".select-no").hide();} else {$(".select-no").show();}}); });
实际应用中,我们要结合后端程序,实现帅选条件时,页面响应的内容也会变化,有兴趣的同学可以尝试下。
下载:fselect
原文:http://www.helloweba.com/view-blog-314.html
转自:jQuery实现多条件筛选
jQuery实现多条件筛选相关推荐
- html5条件筛选jquery,jQuery实现多条件筛选
HTML 首先,我们将查询条件分类,在页面中布置条件容器li.select-list和已选择的条件容器div.select-result. 上装: 全部 针织衫 毛呢外套 T恤 羽绒服 棉衣 卫衣 风 ...
- 基于JSON+JQuery实现的多条件筛选功能(类似京东和淘宝功能)
首先看一下实现效果: 现在JSON用于数据的封装和管理越来越流行,一直想着通过JSON实现很多的小工具,比如多条件筛选.表格定制化.数据验证.tree树等等,最近没事就用JSON和JQuery实现了类 ...
- jQuery教程07-内容筛选选择器
jQuery选择器之内容筛选选择器 基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上 内容过 ...
- 织梦++高级搜索php,织梦多条件筛选功能实现(dede联动搜索) - DeDecms
织梦多条件筛选功能实现(dede联动搜索) 用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了. 其实筛选的话,主要有两个问题需要解决,一个 ...
- 基于JavaScript实现前端数据多条件筛选功能
效果图: 实现方法:默认全部.点击每一项进行不同条件切换,根据后台数据传递参数,实现动态的商品筛选功能. 参考如下: 代码如下:源代码 下载: https://github.com/gaomengpi ...
- pandas使用组合条件筛选、过滤数据行
pandas使用组合条件筛选.过滤数据行 目录 pandas使用组合条件筛选.过滤数据行 #仿真数据
- Pandas常见的数据过滤方法、通过列条件筛选行数据
Pandas常见的数据过滤方法.通过列条件筛选行数据 不废话了,直接看代码吧: 一般情况下,前面5种就覆盖了绝大多数需求 import pandas as pd import numpy as npd ...
- python对excel进行筛选-PythonEXCEL读取-保存-矩阵合并-条件筛选
PythonEXCEL读取-保存-矩阵合并-条件筛选 2018-04-23 10:57阅读: 南北山泉 博主很神秘,什么也没有留下~ 关注 # 监测点1的预处理,选出降雨量大于0的数据 import ...
- 品牌管理案例——添加新品牌 删除品牌 根据条件筛选品牌
添加新品牌 // 分析: // 1. 获取到 id 和 name ,直接从 data 上面获取 // 2. 组织出一个对象 // 3. 把 ...
最新文章
- 后端开发开发mac装机和开发环境指南(新手版)
- 史上最详细阿里云服务器上Docker部署vue项目 实战 每一步都带详细图解!!!
- 一枚角度渐变描边 loading 图标的 SVG 修炼之路
- hadoop-0.21.0 在Windows环境下的部署(2)Hadoop配置
- 在python的dataframe中进行类似于mysql的join操作(持续更新)
- Session会话技术
- 阿里巴巴超大规模Kubernetes基础设施运维体系解读
- 《数据结构》严蔚敏与陈越伪代码总结
- 内文广告程序开发中遇到的一个问题
- 智能优化算法:细菌觅食优化算法 - 附代码
- c/c++编译的程序占用的内存分配
- limcon.v3.60_uk 英国\
- Navicat Premium 15注册出现“rsa public key not find”
- ftp搭建发布到外网踩坑记
- 3D建模的通用文件格式
- 机器人仿真论文阅读1
- html 下划线居中,Word里下划线上内容怎么在下划线范围内居中?
- 量化交易----常见股票特征和编程实现
- 新域名 @live.com 和 @windowslive.com 即将上线 (from cnbeta)
- 7500字拆解林清轩:说透了的“数字化转型”还有什么秘密武器?