html5条件筛选jquery,jQuery实现多条件筛选
HTML
首先,我们将查询条件分类,在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。
- 上装:
- 全部
- 针织衫
- 毛呢外套
- T恤
- 羽绒服
- 棉衣
- 卫衣
- 风衣
- 裤装:
- 全部
- 牛仔裤
- 小脚/铅笔裤
- 休闲裤
- 打底裤
- 哈伦裤
- 已选条件:
- 暂时没有选择过滤条件
布置好内容后,给页面内容加上css样式以及加载相关js。
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();
}
});
});
实际应用中,我们要结合后端程序,实现帅选条件时,页面响应的内容也会变化,有兴趣的同学可以尝试下。
html5条件筛选jquery,jQuery实现多条件筛选相关推荐
- 雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色
jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
- html怎么设置数据条的颜色,jQuery EasyUI 数据网格 – 条件设置行背景颜色 | 菜鸟教程...
jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- jQuery 的常用选择器,筛选器
jQuery jQuery 的简介 插件 :一个功能高度分装 类库 :工具库,提供操作工具,不提供具体功能 jQuery 是一个工具集合 框架 : 项目每一个组件都会提供出来.我们只需要引入框架语法, ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础
使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础 时间:2012年9月25日 分类:JavaScript 标签:HTML5‚ ...
- 转载 - 使用HTML5、CSS3和jQuery增强网站用户体验
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类 ...
- 帝国cms清除html标签,帝国CMS结合项筛选带已选择的条件和删除操作的方法
本文实例讲述了帝国CMS结合项筛选带已选择的条件和删除操作的方法.分享给大家供大家参考.具体实现方法如下: 这个功能是在帝国的官方插件帝国官方插件-结合项列表属性筛选显示下载基础上修改而来的,(官方插 ...
- 使用HTML5、CSS3和jQuery增强网站用户体验
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类 ...
- JavaScript之jQuery够用即可(查找筛选器、属性操作、jQuery文档处理)
文章目录 一.筛选器补充 二.jQuery属性操作 三.jQuery文档处理 一.筛选器补充 1.过滤筛选器 就是查看某个标签中是否存在另外一个标签 // console.log($("di ...
最新文章
- mysql 连接超时 wait_timeout interactive_timeout 简介
- 深入理解php底层:php生命周期 [转]
- python 将指定路径(目录)下的图片或文本文件按给定序号重新排序,并批量重命名 (yolo、tensorflow数据集批量处理)
- boost::test模块测试从数据集对主测试套件的访问
- 平均分组 java_java – 按属性分组对象列表,并计算每个对象的对象属性的平均值...
- 关于 数据文件自增长 的一点理解
- 下一个游戏新风口已来?小游戏或成2018年最大游戏黑马
- mpu 配置内存空间_PCIE的内存地址空间、I/O地址空间和配置地址空间
- 主成分分析(PCA)和基于核函数的主成分分析(KPCA)入门
- 项目的启动顺序_多个项目进行如何做好进度管理
- python扩展c教程_使用C/C++扩展Python
- 三诺 n20g 微型计算机,入门级音箱再现经典 三诺N-20GIII评测
- UVC Extension Unit 相关资料整理
- 【读书】少有人走的路---自律(斯科特 派克)
- Leetcode 1925. Count Square Sum Triples [Python]
- reference other engineer's code to explain wheather linux terminal can display matplotlib' figure
- 网络摄像头Androi端显示(mjpeg)源码分析
- 微信小程序---仿哔哩哔哩
- 浅谈微博App在网站推广中的应用
- 微信识别二维码下载不了app
热门文章
- 微信公众号编辑文章发布时,弹出,图文消息中含有敏感词
- 简单网页版的年会抽奖程序,设计个界面套上就可以了,抽奖员工编号姓名改改代码就可以了,很简单的
- Verilog 中signed和$signed()的用法
- 如何在Fedora 上dnf安装Node.js
- npm i 下载依赖一直报错:git dep preparation failed等
- 最近看到一篇文章拿来跟午饭们分享--养生之道补肾气
- csdn最详细最牛逼的 阿里最新app自动化测试---自动化测试框架搭建
- CSP-J/S2022游寂寞记
- 【求回答】如何在mac上使用pip?zsh: command not found: pip
- Ballerina语言有望改善应用程序集成